/* Windows + the in-window reader + the top menubar. */

/* ---------- menubar ---------- */

/* Two detached pills, not one bar spanning the window. The menubar itself is
   just the strip they live in — no background, and click-through, so the gap
   between them belongs to whatever is underneath rather than swallowing
   pointer events across the whole width. */
.menubar {
    position: fixed;
    z-index: 200;
    top: 0.65rem;
    left: 0.65rem;
    right: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    pointer-events: none;
    color: var(--on-glass);
}

.mb-group {
    display: flex;
    align-items: center;
    gap: clamp(0.55rem, 1.6vw, 1.3rem);
    height: 2.6rem;
    padding: 0 0.85rem;
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge-soft);
    border-radius: 13px;
    box-shadow: var(--glass-lift), var(--glass-inset);
    pointer-events: auto;
}

.mb-right { padding: 0 0.45rem; gap: 0.35rem; }



.mb-mark {
    font-family: var(--jg-display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--on-glass);
    text-decoration: none;
    flex: none;
    white-space: nowrap;
}

.mb-nav { display: flex; align-items: center; gap: clamp(0.6rem, 2vw, 1.5rem); }

.mb-nav a, .mb-nav button {
    font-family: var(--jg-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-glass-soft);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0.2rem 0.55rem;
    cursor: pointer;
    border-radius: var(--r-pill);
    white-space: nowrap;
    transition: background 0.15s linear, color 0.15s linear;
}

.mb-nav a:hover, .mb-nav button:hover { color: var(--on-glass); background: rgba(255, 255, 255, 0.14); }
.mb-nav .is-current { color: var(--on-glass); background: rgba(255, 255, 255, 0.22); }

.mb-view { display: flex; align-items: center; gap: 0.3rem; }

.mb-view button {
    font-family: var(--jg-mono);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--glass-edge-soft);
    background: transparent;
    color: var(--on-glass-soft);
    padding: 0.14rem 0.5rem;
    cursor: pointer;
    border-radius: var(--r-pill);
    transition: background 0.15s linear, color 0.15s linear;
}

.mb-view button.is-current { background: var(--glass-strong); color: var(--on-glass); }

/* Paintball. A mode over the whole page, so it sits with the view control
   rather than in the desktop dock — the dock is gone the moment you enter the
   board, which is exactly where you want to be shooting. */
.mb-tool {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--jg-mono);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--glass-edge-soft);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--on-glass-soft);
    padding: 0.14rem 0.6rem 0.14rem 0.45rem;
    cursor: pointer;
    flex: none;
    transition: background 0.15s linear, color 0.15s linear;
}

.mb-tool svg {
    width: 0.85rem;
    height: 0.85rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.mb-tool:hover { color: var(--on-glass); }

.mb-tool[aria-pressed='true'] {
    background: var(--jg-accent);
    border-color: var(--jg-accent);
    color: #2a2e2b;
}

/* The view toggle only means anything on the board. */
.is-desktop .mb-view { opacity: 0; pointer-events: none; }

/* Everything below the bar starts below the bar. */
/* Clears the floating bar: 0.65rem inset + 2.6rem tall + breathing room. */
.dt-surface { padding-top: 4.6rem; }
.board-hint { bottom: 1.5rem; }

/* ---------- windows ---------- */

.win-layer { position: fixed; inset: 0; z-index: 350; pointer-events: none; }

.win {
    position: absolute;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge);
    border-radius: var(--r-lg);
    box-shadow: var(--glass-lift), var(--glass-inset);
    overflow: hidden;
    min-width: 280px;
    min-height: 180px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .win { background: #4a5051; }
    .menubar { background: #44494a; }
}

.win.is-focused { box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55), var(--glass-inset); }
.win.is-dragging { user-select: none; }

.win.is-max {
    left: 1rem !important;
    top: 3.9rem !important;
    width: calc(100vw - 2rem) !important;
    height: calc(100vh - 5rem) !important;
}

.win-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.6rem 0.55rem 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid var(--glass-edge-soft);
    cursor: grab;
    flex: none;
}

/* Focus is the bar lightening and the shadow deepening, nothing coloured. An
   accent rule down the edge was doing the work of a highlight while reading as
   a stray stripe. */
.win.is-focused .win-bar { background: rgba(255, 255, 255, 0.16); }
.win-bar:active { cursor: grabbing; }

.win-title {
    font-family: var(--jg-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* The bar is dark glass now. Measured off a screenshot, ink on it was
       1.43:1 unfocused and 3.35:1 focused; white is 12.9:1 and 9.6:1. */
    color: var(--on-glass);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.win-actions { display: flex; gap: 0.3rem; flex: none; }

.win-btn {
    width: 1.4rem;
    height: 1.4rem;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--glass-edge);
    border-radius: var(--r-pill);
    color: var(--jg-ink);
    padding: 0;
    transition: background 0.15s linear;
}

.win-btn:hover { background: var(--jg-accent); }
.win-close:hover { background: #e0574a; color: #fff; }

.win-body {
    flex: 1;
    overflow: auto;
    padding: 1.1rem 1.2rem;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--jg-ink);
    /* Opaque: a document, not a pane. At 0.82 the dark ground bled through
       and muddied the text. */
    background: #f7f7f4;
}

.win-body p { margin: 0 0 0.9rem; }
.win-body a { color: var(--jg-blue); }
.win-body img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.win-body canvas { display: block; width: 100%; background: var(--jg-stone); border: 2px solid var(--jg-ink); }
.win-body .bw-note { font-size: 0.75rem; color: var(--jg-dim); margin-top: 0.75rem; }

.win-grip {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    background:
        linear-gradient(135deg, transparent 46%, var(--jg-ink) 46% 54%, transparent 54%),
        linear-gradient(135deg, transparent 70%, var(--jg-ink) 70% 78%, transparent 78%);
}

.win.is-max .win-grip { display: none; }

/* link lists inside windows */
.dt-links { list-style: none; margin: 0; padding: 0; }
.dt-links li { border-top: 1px solid var(--jg-line); }
.dt-links li:first-child { border-top: 0; }

/* A row is a link out, or a button that launches a game in place. Both look
   the same, so the button has to be stripped back to the anchor's shape. */
.dt-links a,
.dt-links button {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    width: 100%;
    padding: 0.65rem 0;
    color: var(--jg-ink);
    text-decoration: none;
    font-family: var(--jg-mono);
    font-size: 0.78rem;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

.dt-links a:hover,
.dt-links button:hover { color: var(--jg-accent); }
.dt-link-meta { color: var(--jg-dim); flex: none; }

/* ---------- reader ---------- */

.win-body.rd { padding: 0; }
.rd-pad { padding: 1.1rem 1.2rem; }
.rd-note { font-family: var(--jg-mono); font-size: 0.72rem; color: var(--jg-dim); }

.rd-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 1.2rem;
    background: #f0f0ec;
    border-bottom: 1px solid var(--jg-line);
    font-family: var(--jg-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jg-muted);
}

.rd-back, .rd-open {
    font: inherit;
    background: none;
    border: 0;
    padding: 0;
    color: var(--jg-blue);
    cursor: pointer;
    text-decoration: none;
}

.rd-back:hover, .rd-open:hover { color: var(--jg-accent); }

.rd-list { list-style: none; margin: 0; padding: 0; }
.rd-list li { border-bottom: 1px solid var(--jg-line); }

.rd-item {
    display: grid;
    gap: 0.3rem;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 1rem 1.2rem;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.rd-item:hover { background: rgba(232, 163, 61, 0.12); }

.rd-item-title {
    font-family: var(--jg-display);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
}

.rd-item-meta {
    font-family: var(--jg-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jg-dim);
}

.rd-item-exc { font-size: 0.85rem; color: var(--jg-muted); line-height: 1.55; }

.rd-post { padding: 1.4rem 1.6rem 2.5rem; max-width: 38rem; }
.rd-post h2 {
    font-family: var(--jg-display);
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0.4rem 0 1.2rem;
    text-wrap: balance;
}
.rd-post p { margin: 0 0 1.15rem; line-height: 1.8; }

/* ---------- narrow ---------- */

/* The bar needs about 408px laid out in full, against roughly 339px of usable
   width on a 360px phone. overflow-x used to be the answer, but the menubar is
   click-through now, so it cannot be scrolled — the two pills have to fit
   instead. Dropping the wordmark and the Paintball label brings it to ~234px;
   both are decoration next to the controls beside them. */
@media (max-width: 700px) {
    .menubar { gap: 0.4rem; top: 0.45rem; left: 0.45rem; right: 0.45rem; }
    .mb-group { height: 2.4rem; padding: 0 0.6rem; gap: 0.5rem; }
    .mb-mark { display: none; }
    .mb-tool-label { display: none; }
    .mb-tool { padding: 0.3rem 0.4rem; gap: 0; }
    .mb-right { padding: 0 0.35rem; }
    .dt-surface { padding-top: 4rem; }
}

/* Touch has no hover to aim with, so the targets have to be big enough to hit
   first time. 44px is the usual floor. */
@media (pointer: coarse) {
    .mb-nav a,
    .mb-nav button,
    .mb-view button,
    .mb-tool { min-height: 2.1rem; display: inline-flex; align-items: center; }
    .mb-view button { padding: 0.3rem 0.7rem; }
}