/* GlobWare.com: mockup D (OCT 15 2026). One layout, two looks: LIGHT (clean) and DARK (Squarez's own world: the dark
   blue grid and the game's colours). The device's setting picks one; the button sets html.dark or html.light. */
@font-face { font-family: "Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
    --bg: #f5f6f8; --card: #fff; --ink: #0f1626; --dim: #5b6475; --line: #e2e5eb; --link: #1f6feb;
    --you: #2f7fe0; --you-edge: #0b3d91; --collect: #16a34a; --collect-edge: #0e7a35; --avoid: #dc2626;
    --power: #b88a00; --power-fill: #f2d64b; --grid: transparent; --tv: #060d18; --code: #eef1f5;
    --tvshadow: 0 30px 60px rgba(15, 22, 38, .25); --tvshadow-sm: 0 10px 24px rgba(15, 22, 38, .22); --cardshadow: 0 1px 2px rgba(15, 22, 38, .05); --radius: 14px;
    --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", Consolas, ui-monospace, monospace;
    color-scheme: light;
}
/* the dark look, twice: once for the device's setting (unless light was picked), once for a picked dark */
@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --bg: #07111f; --card: #0b1a2e; --ink: #e8f0ff; --dim: #8fa3c0; --line: rgba(120, 170, 255, .18); --link: #5fd4ff;
        --you: #2f7fe0; --you-edge: #5fd4ff; --collect: #22c55e; --collect-edge: #6ff09a; --avoid: #e5262b;
        --power: #f2d64b; --power-fill: #f2d64b; --grid: rgba(64, 140, 255, .09); --tv: #000; --code: #0f2440;
        --tvshadow: 0 0 0 2px #5fd4ff, 0 0 0 8px rgba(95, 212, 255, .08), 0 30px 80px rgba(0, 0, 0, .6);
        --tvshadow-sm: 0 0 0 2px #5fd4ff, 0 0 0 5px rgba(95, 212, 255, .08), 0 12px 30px rgba(0, 0, 0, .6); --cardshadow: none; --radius: 4px;
        color-scheme: dark;
    }
}
:root.dark {
    --bg: #07111f; --card: #0b1a2e; --ink: #e8f0ff; --dim: #8fa3c0; --line: rgba(120, 170, 255, .18); --link: #5fd4ff;
    --you: #2f7fe0; --you-edge: #5fd4ff; --collect: #22c55e; --collect-edge: #6ff09a; --avoid: #e5262b;
    --power: #f2d64b; --power-fill: #f2d64b; --grid: rgba(64, 140, 255, .09); --tv: #000; --code: #0f2440;
    --tvshadow: 0 0 0 2px #5fd4ff, 0 0 0 8px rgba(95, 212, 255, .08), 0 30px 80px rgba(0, 0, 0, .6);
        --tvshadow-sm: 0 0 0 2px #5fd4ff, 0 0 0 5px rgba(95, 212, 255, .08), 0 12px 30px rgba(0, 0, 0, .6); --cardshadow: none; --radius: 4px;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
    margin: 0; color: var(--ink); font: 17px/1.6 var(--sans);
    background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0/24px 24px,
        linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/24px 24px, var(--bg);
}
a { color: var(--link); }
img { max-width: 100%; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 9; background: var(--card); padding: 8px 12px; }

/* ---- the top: wordmark, pages, the light/dark button ---- */
header.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; }
.mark { display: flex; align-items: baseline; gap: 12px; text-decoration: none; color: var(--ink); }
.mark b { font: 800 30px/1 var(--sans); letter-spacing: -.045em; }
.mark b svg { width: .62em; height: .62em; margin: 0 .02em; vertical-align: -.02em; }
.mark b svg rect { fill: var(--you); stroke: var(--you-edge); }
.mark small { color: var(--dim); font-size: 14px; }
.right { display: flex; align-items: center; gap: 24px; }
nav.pages { display: flex; gap: 22px; font-size: 15px; }
nav.pages a { text-decoration: none; color: var(--dim); }
nav.pages a:hover, nav.pages a[aria-current] { color: var(--ink); }
.theme { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--card); color: var(--ink); font: 600 13px/1 var(--sans); cursor: pointer; }
.theme i { width: 12px; height: 12px; border: 2px solid var(--you-edge); background: var(--you); }

/* ---- the game's key: its squares mark the sections ---- */
i.k { display: inline-block; width: 14px; height: 14px; border: 2px solid; flex: none; }
.k.you { background: var(--you); border-color: var(--you-edge); }
.k.collect { background: var(--collect); border-color: var(--collect-edge); }
.k.avoid { background: color-mix(in srgb, var(--avoid) 25%, transparent); border-color: var(--avoid); }
.k.power { background: var(--power-fill); border-color: var(--power); }
.key { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 22px 0 0;
    font: 600 13px/1 var(--sans); letter-spacing: .12em; color: var(--dim); }
.key span { display: inline-flex; align-items: center; gap: 9px; }

/* ---- the home page ---- */
.stage { margin: 18px auto 0; max-width: 960px; text-align: center; }
.stage h1 { font: 800 46px/1.1 var(--sans); letter-spacing: -.035em; margin: 8px 0 10px; }
.stage h1 .b { color: var(--link); }
.stage > p { color: var(--dim); margin: 0 auto 26px; max-width: 52ch; }
.tv { position: relative; background: var(--tv); border-radius: 18px; padding: 14px; box-shadow: var(--tvshadow); }
:root.dark .tv { border-radius: 4px; }
@media (prefers-color-scheme: dark) { :root:not(.light) .tv { border-radius: 4px; } }
.tv canvas { display: block; width: 100%; aspect-ratio: 480/272; border-radius: 8px; image-rendering: pixelated; background: #0a1a30; touch-action: none; cursor: crosshair; }
.hud { position: absolute; left: 28px; right: 28px; top: 22px; display: flex; justify-content: space-between; color: #cfe3ff;
    font: 600 13px/1 var(--mono); letter-spacing: .06em; pointer-events: none; }
.gr .g { color: var(--collect); } .gr .r { color: var(--avoid); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 30px 0 0; }
.card { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; text-align: left; padding: 12px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink);
    box-shadow: var(--cardshadow); }
:root.dark .card { border-top: 3px solid var(--c); }
@media (prefers-color-scheme: dark) { :root:not(.light) .card { border-top: 3px solid var(--c); } }
.card img { width: 96px; aspect-ratio: 480/272; object-fit: cover; border-radius: 6px; image-rendering: pixelated; }
.card small { display: block; color: var(--dim); font-size: 13px; }
.card strong { display: block; font-size: 18px; line-height: 1.2; }
.card span { display: inline-block; margin-top: 6px; font-weight: 700; font-size: 14px; color: var(--c); }
.card .soon { color: var(--dim); font-weight: 600; }
section.more { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; margin: 72px 0 0; padding: 44px 0 0; border-top: 1px solid var(--line); }
section.more h2 { margin-top: 0; }
.more p { color: var(--dim); }
.more a.go { font-weight: 600; text-decoration: none; }
.dls { width: 100%; border-collapse: collapse; font-size: 15px; }
.dls td { padding: 11px 0; border-bottom: 1px solid var(--line); }
.dls td:last-child { text-align: right; }
.dls small { color: var(--dim); }

/* ---- every other page ---- */
main.page { max-width: 820px; margin: 0 auto; padding: 24px 0 0; }
main.page.wide { max-width: 1080px; }
.eyebrow { font: 600 13px/1.4 var(--mono); letter-spacing: .08em; color: var(--dim); margin: 0 0 6px; text-transform: uppercase; }
.eyebrow a { color: inherit; }
h1 { font: 800 44px/1.1 var(--sans); letter-spacing: -.035em; margin: 0 0 14px; }
h2 { display: flex; align-items: center; gap: 12px; font: 800 28px/1.2 var(--sans); letter-spacing: -.02em; margin: 56px 0 14px; }
h3 { font: 700 20px/1.3 var(--sans); letter-spacing: -.01em; margin: 32px 0 8px; }
.lede { font-size: 19px; color: var(--dim); max-width: 62ch; }
.small { font-size: 14px; color: var(--dim); }
code, kbd { font: 500 .88em/1 var(--mono); background: var(--code); border-radius: 4px; padding: 2px 5px; }
kbd { border: 1px solid var(--line); }
pre { background: var(--code); padding: 14px; border-radius: 8px; overflow-x: auto; font: 500 14px/1.5 var(--mono); }
pre code { background: none; padding: 0; }
blockquote { margin: 18px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--power-fill); color: var(--dim); }
hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.btns { list-style: none; padding: 0; margin: 20px 0; display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line);
    background: var(--card); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; }
.btn.play { background: var(--collect); border-color: var(--collect-edge); color: #fff; }
:root.dark .btn.play { color: #03140a; }
@media (prefers-color-scheme: dark) { :root:not(.light) .btn.play { color: #03140a; } }
.chip { font: 600 12px/1 var(--mono); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--power); color: var(--power); vertical-align: middle; }
.table { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 13px; color: var(--dim); font-weight: 600; }

/* pictures: the games' own pixels, kept sharp */
.pics, .gallery { display: grid; gap: 14px; margin: 18px 0; }
.pics.pair, .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
figure { margin: 0; }
figure img, .shot { display: block; width: 100%; height: auto; image-rendering: pixelated; border-radius: 6px; background: #000; }
figcaption { font-size: 14px; color: var(--dim); margin-top: 6px; }
.pics:not(.pair) { max-width: 560px; }

/* the Squarez page's key, versions */
ul.squares { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
ul.squares li { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font-size: 15px; }
ul.squares b { display: block; font-size: 13px; letter-spacing: .1em; }
.sq { width: 18px; height: 18px; border: 2px solid; flex: none; margin-top: 3px; }
.sq.blue { background: var(--you); border-color: var(--you-edge); } .sq.green { background: var(--collect); border-color: var(--collect-edge); }
.sq.red { background: color-mix(in srgb, var(--avoid) 25%, transparent); border-color: var(--avoid); }
.sq.yellow { background: var(--power-fill); border-color: var(--power); } .sq.purple { background: #8b3fd6; border-color: #c48cff; }
ul.timeline { list-style: none; padding: 0; }
ul.timeline li { padding: 10px 0; border-bottom: 1px solid var(--line); }
ul.timeline .yr { font: 700 15px/1 var(--mono); margin-right: 10px; } ul.timeline .v { color: var(--dim); font-size: 14px; }
ul.timeline p { margin: 4px 0 0; }

/* ---- the journal ---- */
ul.entries { list-style: none; padding: 0; display: grid; gap: 12px; }
.entry a { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); box-shadow: var(--cardshadow); }
.entry .thumb { width: 144px; aspect-ratio: 480/272; object-fit: cover; border-radius: 6px; image-rendering: pixelated; background: var(--tv); }
.entry .when { display: block; font: 600 12px/1.4 var(--mono); color: var(--dim); }
.entry .title { display: block; font-weight: 700; font-size: 18px; line-height: 1.3; }
.entry .sum { display: block; color: var(--dim); font-size: 15px; }
article.journal { margin-top: 24px; }
article.journal h2 { font-size: 24px; margin-top: 40px; }
.when { font: 600 13px/1.4 var(--mono); color: var(--dim); }
.prevnext { display: flex; justify-content: space-between; gap: 16px; margin: 48px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; }
.prevnext a { text-decoration: none; max-width: 48%; }
.prevnext .newer { text-align: right; margin-left: auto; }

/* ---- the story (the timeline) ---- */
.eras { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.eras a { font: 600 13px/1 var(--sans); color: var(--ink); text-decoration: none; border: 1px solid var(--line); background: var(--card);
    border-radius: 999px; padding: 8px 12px; }
.eras a span { color: var(--dim); font-weight: 500; }
h2 .yrs { font: 600 15px/1 var(--mono); color: var(--dim); letter-spacing: 0; }
h2 .btn { margin-left: auto; font-size: 13px; padding: 7px 12px; }
.era-about { color: var(--dim); margin: 0 0 8px; }
.quote { margin: 12px 0 18px; font-size: 18px; }
.quote span { display: block; font-size: 13px; margin-top: 4px; }
ol.tl-list { list-style: none; margin: 14px 0 0; padding: 0 0 0 22px; border-left: 2px solid var(--line); display: grid; gap: 14px; }
.tl { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--cardshadow); }
.tl::before { content: ""; position: absolute; left: -31px; top: 18px; width: 12px; height: 12px; border: 2px solid var(--you-edge); background: var(--you); }
.tl.news { border-style: dashed; }
.tl.news::before { background: var(--power-fill); border-color: var(--power); }
.tl h3 { margin: 4px 0 6px; font-size: 18px; }
.tl p { margin: 0 0 8px; }
.tl .ver, .tl .site { font: 600 12px/1 var(--mono); padding: 3px 8px; border-radius: 999px; margin-left: 8px; border: 1px solid var(--line); color: var(--dim); }
.tl .site { border-color: var(--power); color: var(--power); }
.tl .pics { margin: 10px 0; }
.tl .note { border-left: 3px solid var(--power-fill); padding: 4px 10px; font-size: 15px; color: var(--dim); }
.srcs { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--dim); }
.jl { font-size: 14px; }
.newslist { list-style: none; padding: 0; }
.newslist li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.newslist a { text-decoration: none; color: var(--ink); }
.newslist .when { margin-right: 8px; }
.newslist b { color: var(--power); font-weight: 700; margin-right: 6px; }
ol.questions li { margin: 8px 0; }

/* ---- PLAY ---- */
.console { display: block; width: 100%; height: 80vh; border: 0; background: var(--tv); border-radius: 8px; overflow: hidden; }
.soon-box { position: relative; margin: 20px 0; }
.soon-box img { display: block; width: 100%; image-rendering: pixelated; border-radius: var(--radius); filter: saturate(.6) brightness(.55); }
.soon-box p { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; margin: 0; color: #fff; }
.soon-box b { font: 800 34px/1.1 var(--sans); letter-spacing: -.02em; }
.soon-box span { font-size: 16px; opacity: .9; margin-top: 8px; }
/* the switcher above the game: each game's PLAY page, the one you're on marked in its color */
.playswitch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0 16px; }
.playswitch .tab { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 10px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink);
    box-shadow: var(--cardshadow); }
.playswitch img { width: 72px; height: auto; aspect-ratio: 480/272; object-fit: cover; border-radius: 4px; image-rendering: pixelated; display: block; }
.playswitch b { display: block; font-size: 15px; line-height: 1.2; }
.playswitch .era { display: block; color: var(--dim); font-size: 13px; }
.playswitch a.tab:hover { border-color: var(--c); }
.playswitch .here { border: 2px solid var(--c); padding: 7px 9px; }
.playswitch .here b { color: var(--c); }

/* a game's versions, under the game switch (Squarez: v0.8.3 from 2026, v0.8.1 from 2005) */
.versions { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
.versions .tab { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; border: 1px solid var(--line);
    border-radius: 999px; background: var(--card); color: var(--ink); text-decoration: none; font-size: 14px; }
.versions .tab b { font: 700 13px/1 var(--mono); }
.versions .tab span { color: var(--dim); }
.versions a.tab:hover { border-color: var(--you-edge); }
.versions .here { border: 2px solid var(--you-edge); padding: 7px 13px; }
.versions .here b { color: var(--you-edge); }

/* ---- high scores: a tab per mode, its timed boards under it, then the board ---- */
.scores { margin: 8px 0 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.tabs button { font: 600 14px/1 var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line);
    border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--you); border-color: var(--you-edge); color: #fff; }
.tabs[hidden] { display: none; }
.tabs .label { flex-basis: 100%; font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 8px 0 0; }
.tabs.sub { margin-top: 10px; }
.tabs.sub button { font: 600 13px/1 var(--mono); padding: 7px 12px; }
.tabs.sub button[aria-selected="true"] { background: var(--power-fill); border-color: var(--power); color: #1a1405; }
.board { margin: 18px 0 0; }
.board td.rank, .board th.rank { width: 3.5em; font: 700 14px/1.6 var(--mono); color: var(--dim); }
.board td.name { font-weight: 700; overflow-wrap: anywhere; }
.board td.score { font: 700 16px/1.5 var(--mono); }
.board td.date, .board td.ver { color: var(--dim); font-size: 14px; white-space: nowrap; }
.board tr.me td { background: color-mix(in srgb, var(--collect) 14%, transparent); }
.board .you { font: 600 11px/1 var(--sans); letter-spacing: .04em; color: var(--collect-edge); margin-left: 8px; }
.plat { font: 600 12px/1 var(--mono); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); white-space: nowrap; }
.plat.browser { border-color: var(--you-edge); color: var(--you-edge); }
.plat.windows { border-color: var(--collect-edge); color: var(--collect-edge); }
.plat.iphone { border-color: var(--power); color: var(--power); }
.board .empty, .board .yours { color: var(--dim); }
@media (max-width: 860px) {
    .board .ver, .board .date { display: none; }    /* (on a phone: room for 12-character names) */
    .board th, .board td { padding-right: 8px; }
}

/* ---- the soft launch: one page, the story and what's coming ---- */
section.soft { max-width: 820px; margin: 24px auto 0; }
section.soft h2 { margin-top: 64px; }
section.soft .gallery.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
section.soft .gallery.three img { aspect-ratio: 480/272; object-fit: contain; background: #000; }  /* (the iPhone's 480x320 fits inside, so all three sit level) */
/* the three game shots framed like the hero's screen (the user, OCT 16 2026): its frame and glow, smaller */
section.soft .gallery.three img { box-sizing: content-box; padding: 6px; background: var(--tv); border-radius: 10px; box-shadow: var(--tvshadow-sm); }
:root.dark section.soft .gallery.three img { border-radius: 4px; }
@media (prefers-color-scheme: dark) { :root:not(.light) section.soft .gallery.three img { border-radius: 4px; } }
section.soft .gallery.three { gap: 20px; }
#squarez-tv { position: relative; }                   /* SQUAREZ TV's canvas lies over the hero's picture, its poster */
#squarez-tv .squarez-tv-canvas { border-radius: 6px; }
@media (max-width: 860px) {            /* the soft launch's key: two by two on a phone, so none sits alone on a line */
    .key.soft-key { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 12px 28px; }
}
section.soft .gallery.three figcaption b, section.soft .gallery.three figcaption span { display: block; }  /* (name, then year and platform) */
@media (max-width: 860px) { section.soft .gallery.three { grid-template-columns: 1fr; } }

footer.foot { margin: 72px 0 0; padding: 24px 0 40px; border-top: 1px solid var(--line); color: var(--dim); font-size: 14px;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
footer.foot a { color: inherit; }

@media (max-width: 860px) {
    .wrap { padding: 0 16px; }
    nav.pages { display: none; }
    .mark small { display: none; }
    .theme b { display: none; }
    .cards, section.more { grid-template-columns: 1fr; gap: 12px; }
    section.more { gap: 36px; }
    .stage h1 { font-size: 32px; }
    h1 { font-size: 32px; }
    h2 { font-size: 24px; margin-top: 44px; }
    .tv { padding: 8px; border-radius: 12px; }
    .hud { left: 16px; right: 16px; top: 14px; font-size: 11px; }
    .pics.pair, .gallery { grid-template-columns: 1fr; }
    .entry a { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
    .entry .thumb { width: 96px; }
    ol.tl-list { padding-left: 16px; }
    .tl::before { left: -24px; }
    h2.era-h { flex-wrap: wrap; }
    h2.era-h .btn { margin-left: 0; }
    .soon-box b { font-size: 24px; }
    .soon-box span { font-size: 14px; }
    .playswitch { grid-template-columns: 1fr; gap: 6px; }
}
/* on small screens the top nav hides; the pages are in the footer and on a bar under the header */
.mobnav { display: none; }
@media (max-width: 860px) {
    .mobnav { display: flex; gap: 18px; overflow-x: auto; padding: 0 0 12px; font-size: 15px; }
    .mobnav a { color: var(--dim); text-decoration: none; white-space: nowrap; }
    .mobnav a[aria-current] { color: var(--ink); font-weight: 600; }
}