/* 26awake pages (home, game, music). Plain white, system font. The tracker (watch.html) keeps its own style.css. */
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #fff; color: #111; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: inherit; }

/* ---- scattered links (placed by scatter.js) ---- */
.scatter { position: absolute; text-decoration: underline; white-space: nowrap; font-size: 1.05rem; }
.js .scatter { visibility: hidden; }
.js .scatter.placed { visibility: visible; }
.back { position: fixed; top: 12px; left: 16px; z-index: 30; padding: 2px 6px; background: #fff; color: #111; text-decoration: underline; white-space: nowrap; }
.home { position: relative; min-height: 100vh; overflow: hidden; }
.home .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, 80vw); height: auto; }
/* logo with the music video under it, together in the middle */
.home-center { position: absolute; inset: 0 0 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; pointer-events: none; }
.home-center > * { pointer-events: auto; }
.home-center .logo { position: static; transform: none; width: min(460px, 80vw, 90vh); }
.mv { width: min(380px, 84vw, calc((72vh - 96px) * 16 / 9)); } /* logo + video + button fit short screens too */
.mv iframe, #mv-player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; background: #000; }
.mv-ctl { display: flex; justify-content: center; gap: 16px; margin-top: 6px; }
.mv-sound { display: block; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: .85rem; color: #111; text-decoration: underline; cursor: pointer; }
.mv-sound[hidden] { display: block; visibility: hidden; } /* keeps its space until the player is ready */
/* the silent full-screen copy, seen only through glitch holes (video.js) */
.mv-ghost { position: fixed; inset: 0; z-index: 45; overflow: hidden; pointer-events: none; }
.mv-ghost iframe { position: absolute; border: 0; pointer-events: none; }
.btn { padding: 8px 18px; border: 1px solid #111; background: #fff; color: #111; font: inherit; cursor: pointer; }
.btn:hover { background: #111; color: #fff; }

/* ---- pages ---- */
.page { max-width: 760px; margin: 0 auto; padding: 64px 16px 64px; }
.page h1 { margin: 0 0 6px; font-size: 1.8rem; }
.muted { color: #777; }
.small { font-size: .85rem; }
.empty { padding: 32px 16px; text-align: center; color: #777; border: 1px dashed #ccc; }

/* ---- game: 2048 ---- */
.g8-page { min-height: 100vh; display: grid; place-items: center; align-content: start; gap: 28px; padding: 56px 16px 72px; }
/* the fake "1.000.000th player" ad at the top of the game pages */
.fake-ad { display: block; width: min(728px, 100%); height: auto; cursor: pointer; }
.fake-ad:active { translate: 2px 2px; }
.g8 { width: min(440px, 100%); }
.g8-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 14px; }
.g8-head h1 { margin: 0; font-size: 3rem; line-height: 1; letter-spacing: -.03em; }
.g8-scores { display: flex; gap: 8px; }
.g8-sbox { min-width: 76px; padding: 6px 12px; background: #f2f2f2; border-radius: 6px; text-align: center; }
.g8-sbox span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #888; }
.g8-sbox b { display: block; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.g8-board { position: relative; padding: 10px; background: #e2e2e2; border-radius: 8px; outline: none; touch-action: none; }
.g8-board:focus-visible { box-shadow: 0 0 0 1px #bbb; }
.g8-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.g8-cell { aspect-ratio: 1; display: grid; place-items: center; background: #f3f3f3; border-radius: 5px; font-weight: 700;
  font-size: clamp(1.4rem, 6.4vw, 2.2rem); font-variant-numeric: tabular-nums; transition: background .1s, color .1s; }
.g8-cell.big { font-size: clamp(1.15rem, 5vw, 1.75rem); }
.g8-cell.huge { font-size: clamp(.95rem, 4vw, 1.4rem); }
.g8-cell.new { animation: g8-in .14s ease-out; }
.g8-cell.merged { animation: g8-pop .14s ease-out; }
@keyframes g8-in { from { transform: scale(.6); opacity: 0; } }
@keyframes g8-pop { 50% { transform: scale(1.08); } }
/* tiles get darker as they grow */
.v2 { background: #fff; color: #666; } .v4 { background: #f0f0f0; color: #555; box-shadow: inset 0 0 0 1px #ddd; }
.v8 { background: #d6d6d6; color: #222; } .v16 { background: #c0c0c0; color: #111; } .v32 { background: #a6a6a6; color: #fff; }
.v64 { background: #8c8c8c; color: #fff; } .v128 { background: #737373; color: #fff; } .v256 { background: #5c5c5c; color: #fff; }
.v512 { background: #474747; color: #fff; } .v1024 { background: #2e2e2e; color: #fff; } .v2048, .vmax { background: #000; color: #fff; }
.g8-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  text-align: center; background: rgb(255 255 255 / .92); border-radius: 8px; }
.g8-overlay[hidden], .g8-overlay [hidden] { display: none; }
#g8-msg { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.g8-sub { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: #888; }
.g8-big { font-size: 2.8rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.g8-actions { display: flex; gap: 10px; }
.g8-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.g8-reset { border: 0; background: none; padding: 0; font: inherit; font-size: .85rem; color: #777; cursor: pointer; text-decoration: underline; white-space: nowrap; }
.g8-reset:hover { color: #111; }

.g8-board.loading .g8-grid { opacity: .4; }
.g8-rank { margin-top: 28px; }
.g8-rank h2 { font-size: 1rem; margin: 18px 0 8px; }
#g8-me { margin: 0; line-height: 1.6; }
.g8-table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.g8-table th { text-align: left; font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #888;
  border-bottom: 1px solid #ddd; padding: 6px 4px; }
.g8-table td { padding: 7px 4px; border-bottom: 1px solid #eee; }
.g8-table tr.me td { background: #f2f2f2; font-weight: 700; }
.g8-recovery { margin-top: 22px; padding-top: 14px; border-top: 1px solid #eee; }
.g8-recovery p { margin: 6px 0; }
.g8-code code { font-size: .8rem; background: #f2f2f2; padding: 3px 6px; word-break: break-all; }
.g8-recovery summary { cursor: pointer; color: #777; }
.g8-nick .btn { padding: 5px 12px; font-size: .85rem; }
.g8-input.g8-name { width: 160px; margin-top: 8px; }
.g8-input { width: min(320px, 100%); font: inherit; font-size: .85rem; padding: 6px 8px; border: 1px solid #ccc; }

/* ---- game2: minesweeper ---- */
.ms { width: min(900px, 100%); }
.ms-diff { display: flex; gap: 6px; margin: 0 0 12px; }
.ms-diff button { font: inherit; font-size: .85rem; padding: 4px 12px; border: 1px solid #ccc; background: #fff; color: #555; cursor: pointer; }
.ms-diff button[aria-pressed="true"] { background: #111; color: #fff; border-color: #111; }
.ms-wrap { display: flex; justify-content: center; }
.ms-grid { display: grid; gap: 1px; background: #c8c8c8; border: 1px solid #c8c8c8; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; -webkit-touch-callout: none; }
.ms-grid.busy { opacity: .6; }
.ms-cell { width: var(--cell); height: var(--cell); display: grid; place-items: center; background: #e4e4e4; cursor: pointer;
  font-weight: 700; font-size: calc(var(--cell) * .55); line-height: 1; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #bdbdbd; }
.ms-cell:hover { background: #ececec; }
.ms-cell.open { background: #fafafa; box-shadow: none; cursor: default; }
.ms-grid.ended .ms-cell { cursor: default; }
.ms-cell.flag { color: #c0392b; }
.ms-cell.flag.wrong { background: #f3d6d6; }
.ms-cell.mine { background: #e8e8e8; color: #111; }
.ms-cell.boom { background: #e74c3c; color: #111; }
.ms-cell.n1 { color: #1f5fbf; } .ms-cell.n2 { color: #2e7d32; } .ms-cell.n3 { color: #c62828; } .ms-cell.n4 { color: #283593; }
.ms-cell.n5 { color: #8d2c1d; } .ms-cell.n6 { color: #00838f; } .ms-cell.n7 { color: #111; } .ms-cell.n8 { color: #777; }
.ms-result { min-height: 1.5em; margin: 10px 0 0; text-align: center; font-weight: 600; }
#ms-flagmode[aria-pressed="true"] { color: #c0392b; }
.ms .g8-head { flex-wrap: wrap; gap: 10px; }
.ms .g8-head h1 { font-size: clamp(1.9rem, 9vw, 3rem); }
.ms { min-width: 0; max-width: 100%; }

/* ---- game3: sudoku ---- */
.sd { width: min(460px, 100%); }
.sd .g8-head h1 { font-size: clamp(1.9rem, 9vw, 3rem); }
.sd-grid { display: grid; grid-template-columns: repeat(9, 1fr); border: 2px solid #111; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; }
.sd-grid.busy { opacity: .4; }
.sd-cell { aspect-ratio: 1; display: grid; place-items: center; border-right: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0;
  font-size: clamp(1.1rem, 5.4vw, 1.6rem); color: #1f5fbf; cursor: pointer; position: relative; background: #fff; }
.sd-cell:nth-child(9n) { border-right: 0; }
.sd-cell:nth-child(n+73) { border-bottom: 0; }
.sd-cell.bR { border-right: 2px solid #111; }
.sd-cell.bB { border-bottom: 2px solid #111; }
.sd-cell.given { color: #111; font-weight: 700; }
.sd-cell.zone { background: #f3f3f3; }
.sd-cell.same { background: #dcdcdc; }
.sd-cell.sel { background: #cfe0f7; }
.sd-cell.bad { color: #c62828; }
.sd-grid.done .sd-cell { cursor: default; }
.sd-notes { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; padding: 1px; }
.sd-notes span { display: grid; place-items: center; font-size: clamp(.45rem, 1.9vw, .62rem); color: #777; line-height: 1; }
.sd-pad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; margin-top: 12px; }
.sd-pad button { font: inherit; font-size: 1.15rem; padding: 9px 0; border: 1px solid #ccc; background: #fff; cursor: pointer; }
.sd-pad button:hover { background: #f2f2f2; }
.sd-pad button:disabled { color: #ccc; cursor: default; }
.sd-pad .tool { grid-column: span 3; font-size: .85rem; color: #555; }
.sd-pad #sd-notes[aria-pressed="true"] { background: #111; color: #fff; border-color: #111; }

/* ---- home: visitor count ---- */
.visits { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; font-size: .78rem; color: #999; white-space: nowrap; }
.visits[hidden] { display: none; }

.sd-board { position: relative; }
.sd-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgb(255 255 255 / .94); }
.sd-cover[hidden] { display: none; }
.sd-cover p { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: #888; }
.sd-cover .btn { font-size: 1.05rem; padding: 10px 34px; }
.sd-grid.covered .sd-cell { color: transparent; background: #fff; }
.sd-grid.covered .sd-notes span { color: transparent; }
.ms-board { position: relative; }
.ms-grid.covered .ms-cell { color: transparent; background: #eee; box-shadow: none; }

/* ---- glitch (glitch.js) ---- */
.gl-scan { position: fixed; inset: 0; z-index: 50; pointer-events: none; mix-blend-mode: multiply;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.045) 0 1px, transparent 1px 3px); }
.gl-txt:not(.scatter) { position: relative; }
.gl-txt::before, .gl-txt::after { content: attr(data-text); position: absolute; inset: 0; padding: inherit; pointer-events: none;
  opacity: 0; background: transparent; white-space: nowrap; }
.gl-txt.gl-on::before { opacity: .9; color: var(--gl-a, #ff00aa); animation: gl-slice-a .3s steps(2) infinite; }
.gl-txt.gl-on::after { opacity: .9; color: var(--gl-b, #00ffd5); animation: gl-slice-b .25s steps(2) infinite; }
.gl-txt.gl-on { text-shadow: 2px 0 var(--gl-a, #ff00aa), -2px 0 var(--gl-b, #00ffd5); }
@keyframes gl-slice-a {
  0% { clip-path: inset(10% 0 60% 0); translate: -4px 0; } 25% { clip-path: inset(70% 0 5% 0); translate: 3px 0; }
  50% { clip-path: inset(35% 0 40% 0); translate: -2px 0; } 75% { clip-path: inset(0 0 85% 0); translate: 5px 0; }
  100% { clip-path: inset(55% 0 20% 0); translate: -3px 0; } }
@keyframes gl-slice-b {
  0% { clip-path: inset(65% 0 10% 0); translate: 4px 0; } 25% { clip-path: inset(5% 0 75% 0); translate: -3px 0; }
  50% { clip-path: inset(40% 0 30% 0); translate: 2px 0; } 75% { clip-path: inset(85% 0 0 0); translate: -5px 0; }
  100% { clip-path: inset(20% 0 55% 0); translate: 3px 0; } }
.gl-slice { position: absolute; z-index: 40; pointer-events: none; margin: 0; transform: none; }
.logo.gl-split { filter: drop-shadow(-4px 0 #ff00aa) drop-shadow(4px 0 #00ffd5); }
.gl-tear { position: fixed; left: -40px; right: -40px; z-index: 60; pointer-events: none;
  backdrop-filter: invert(1); -webkit-backdrop-filter: invert(1); }
.gl-block { position: fixed; z-index: 55; pointer-events: none; }
.gl-flick { animation: gl-flick .12s steps(1) infinite; }
@keyframes gl-flick { 50% { opacity: 0; } }
.gl-jolt body { translate: 6px -3px; filter: hue-rotate(160deg) saturate(3) contrast(1.4); }
@media (prefers-reduced-motion: reduce) { .gl-txt::before, .gl-txt::after { display: none; } }

/* ---- phones and tablets: computers only (mobile.html) ---- */
.nope-box { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px 16px; text-align: center; }
.nope-box .logo { position: static; transform: none; width: min(320px, 76vw, 42vh); height: auto; margin-bottom: 18px; }
.nope-box h1 { margin: 0; font-size: clamp(2rem, 11vw, 3.4rem); line-height: 1.05; letter-spacing: -.03em; }
.nope-box p { margin: 0; color: #555; max-width: 30ch; }
.nope-url { margin-top: 8px !important; font-size: 1.4rem; font-weight: 700; color: #111 !important; background: #b6ff00; padding: 2px 10px; }

/* ---- mini music-video player on the game pages (music.js), same look as the home page box ---- */
.mini-mv { position: fixed; right: 16px; bottom: 16px; z-index: 66; width: 356px; background: #fff; padding-bottom: 4px; }
.mini-mv[hidden] { display: none; }
.mini-mv-video iframe { display: block; width: 356px; height: 200px; border: 0; background: #000; }
.mini-mv-pill { position: fixed; right: 16px; bottom: 16px; z-index: 66; padding: 0; border: 0; background: none; color: #111;
  font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }
.mini-mv-pill[hidden] { display: none; }
.mini-mv.docked:not([hidden]), .mini-mv-pill.docked:not([hidden]) { position: static; margin: 0 auto 48px; }
.mini-mv-pill.docked:not([hidden]) { display: block; }