/* Colors as tokens so dark mode (shared/theme.js) only has to swap values. */
:root {
    --bg: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
    --line: #e5e7eb;
    --tag-bg: #f3f4f6;
    --feature-bg: #dbeafe;
    --feature-text: #1e40af;
    --fix-bg: #fee2e2;
    --fix-text: #991b1b;
    /* Game tags use each game's tile color (hub/apps.js). */
    --time-gap-bg: #ddf0e4;
    --time-gap-text: #166534;
    --pokopia-doku-bg: #ebe1f6;
    --pokopia-doku-text: #6b21a8;
    --marker-picker-bg: #fde7d9;
    --marker-picker-text: #9a3412;
    --hue-dex-bg: #ddebfb;
    --hue-dex-text: #1e40af;
    --queens-bg: #f6ebcb;
    --queens-text: #854d0e;
    --patchwork-bg: #fbefd3;
    --patchwork-text: #92400e;
    --silhouette-dex-bg: #fbe2ea;
    --silhouette-dex-text: #9d174d;
    --pawn-sweep-bg: #e3efd6;
    --pawn-sweep-text: #3f6212;
    --word-hive-bg: #fff3c4;
    --word-hive-text: #854d0e;
    --type-chain-bg: #e0f0f4;
    --type-chain-text: #155e75;
    --afterimage-bg: #dcf1f0;
    --afterimage-text: #115e59;
    --word-ladder-bg: #e6e9f8;
    --word-ladder-text: #3730a3;
    --seg-on-bg: #ffffff;
    --seg-shadow: rgba(0, 0, 0, .12);
}

:root[data-theme="dark"] {
    --bg: #15161a;
    --text: #e7e9ee;
    --muted: #9aa0ab;
    --line: #2a2c33;
    --tag-bg: #23252c;
    --feature-bg: #172a4a;
    --feature-text: #93c5fd;
    --fix-bg: #3b1a1a;
    --fix-text: #fca5a5;
    --time-gap-bg: #17321f;
    --time-gap-text: #86efac;
    --pokopia-doku-bg: #2c2340;
    --pokopia-doku-text: #d8b4fe;
    --marker-picker-bg: #3a2418;
    --marker-picker-text: #fdba8c;
    --hue-dex-bg: #1b2a44;
    --hue-dex-text: #93c5fd;
    --queens-bg: #33290f;
    --queens-text: #fde68a;
    --patchwork-bg: #3a2a14;
    --patchwork-text: #fdba74;
    --silhouette-dex-bg: #3d1b29;
    --silhouette-dex-text: #f9a8d4;
    --pawn-sweep-bg: #24301a;
    --pawn-sweep-text: #bef264;
    --word-hive-bg: #3a3214;
    --word-hive-text: #fde047;
    --type-chain-bg: #143038;
    --type-chain-text: #67e8f9;
    --afterimage-bg: #12302e;
    --afterimage-text: #5eead4;
    --word-ladder-bg: #22253d;
    --word-ladder-text: #a5b4fc;
    --seg-on-bg: #34373f;
    --seg-shadow: rgba(0, 0, 0, .4);
}

/* No double-tap zoom (pinch zoom still works) */
html {
    touch-action: manipulation;
}

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
}

main {
    max-width: 600px;
    margin: auto;
    padding: 64px 16px 40px;
}

h1 {
    margin: 0;
}

.intro {
    margin: 8px 0 24px;
    color: var(--muted);
}

/* Filters and counts (built by script.js): a type switch and a game menu on one row. */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.segmented {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: var(--tag-bg);
}

.segmented button {
    padding: 5px 12px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.segmented button:hover {
    color: var(--text);
}

.segmented button[aria-pressed="true"] {
    background: var(--seg-on-bg);
    color: var(--text);
    box-shadow: 0 1px 3px var(--seg-shadow);
}

.count {
    margin-left: 5px;
    opacity: .6;
    font-variant-numeric: tabular-nums;
}

.select-wrap {
    position: relative;
}

/* Chevron for the game menu. */
.select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.select-wrap select {
    appearance: none;
    padding: 8px 34px 8px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--tag-bg);
    color: var(--text);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

.segmented button:focus-visible,
.select-wrap select:focus-visible {
    outline: 2px solid var(--feature-text);
    outline-offset: 2px;
}

.stats {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

.empty {
    padding: 20px 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
}

/* Releases */
.release {
    padding: 20px 0;
    border-top: 1px solid var(--line);
}

.release h2 {
    margin: 0 0 12px;
    font-size: 1rem;
}

.area + .area {
    margin-top: 16px;
}

.area h3,
.kind-group h4 {
    margin: 0 0 8px;
    font-size: inherit;
}

.area h3 .tag {
    font-size: .8125rem;
}

.kind-group + .kind-group {
    margin-top: 12px;
}

/* A game's types sit indented under its name, and each type's changes under its label, along thin
   lines in the color of the tag or label above (--rail, set by script.js). */
.area-body,
.release .kind-group ul {
    margin-left: 6px;
    padding-left: 12px;
    border-left: 2px solid color-mix(in srgb, var(--rail, var(--line)) 55%, transparent);
}

.release ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.release li {
    margin: 0 0 10px;
    line-height: 1.5;
}

.release li:last-child {
    margin-bottom: 0;
}

[hidden] {
    display: none !important;
}

.tag,
.kind {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--tag-bg);
    color: var(--muted);
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    vertical-align: 1px;
}

.kind {
    margin-right: 2px;
}

.kind-feature {
    background: var(--feature-bg);
    color: var(--feature-text);
}

.kind-fix {
    background: var(--fix-bg);
    color: var(--fix-text);
}

.tag-time-gap {
    background: var(--time-gap-bg);
    color: var(--time-gap-text);
}

.tag-pokopia-doku {
    background: var(--pokopia-doku-bg);
    color: var(--pokopia-doku-text);
}

.tag-marker-picker {
    background: var(--marker-picker-bg);
    color: var(--marker-picker-text);
}

.tag-hue-dex {
    background: var(--hue-dex-bg);
    color: var(--hue-dex-text);
}

.tag-queens {
    background: var(--queens-bg);
    color: var(--queens-text);
}

.tag-patchwork {
    background: var(--patchwork-bg);
    color: var(--patchwork-text);
}

.tag-silhouette-dex {
    background: var(--silhouette-dex-bg);
    color: var(--silhouette-dex-text);
}

.tag-pawn-sweep {
    background: var(--pawn-sweep-bg);
    color: var(--pawn-sweep-text);
}

.tag-word-hive {
    background: var(--word-hive-bg);
    color: var(--word-hive-text);
}

.tag-type-chain {
    background: var(--type-chain-bg);
    color: var(--type-chain-text);
}

.tag-afterimage {
    background: var(--afterimage-bg);
    color: var(--afterimage-text);
}

.tag-word-ladder {
    background: var(--word-ladder-bg);
    color: var(--word-ladder-text);
}

a.tag:hover,
a.tag:focus-visible {
    text-decoration: underline;
}