/* moldywit.com: Pixel Petri Lab, in two themes.
   LIGHT: pale agar, dark ink, square pixels.
   DARK: the same plates on a lights-off board with a faint grid of unlit dots; the mould
   glows at its rims in the Dotz neons.
   Everything that differs between them is a custom property below; <html data-theme> is
   set before first paint by the inline script in each page's <head>.
   House rule: reading text is always ink/grey (light) or white/grey (dark). Colour lives in
   the mould, the dish and a few structural marks; never in paragraph or link text. */

:root {
  /* surfaces */
  --agar: #eeecd9;          /* page */
  --agar-2: #e5e2c9;        /* footer */
  --dish: #fbfaf0;          /* plates, header */
  --bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Crect x='3' y='6' width='3' height='3' fill='%23e3e0c6'/%3E%3Crect x='15' y='18' width='3' height='3' fill='%23e6e3ca'/%3E%3C/svg%3E");
  /* text (neutral only) */
  --ink: #1d2420;
  --ink-2: #4b534d;         /* 7.4:1 on --agar */
  --ink-3: #6a716b;         /* placeholders */
  /* structure */
  --edge: #1d2420;          /* pixel borders */
  --line: #c9c6a9;
  --shadow: #d6d2b3;        /* plate drop */
  --wm-shadow: #cfcbaa;
  --focus: #1d2420;
  --sel: #b5ddd5;
  --btn-bg: #1d2420; --btn-fg: #fbfaf0; --btn-drop: #0c110e;
  --field: #ffffff; --field-inset: #ebe9d6;
  --screen: #0b0d12;        /* the Dotz board panel: dark in both themes */
  --ico-fill: #f8f8ee; --ico-ring: #1d2420;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h15v3H0zM3 3h9v3H3zM6 6h3v3H6z' fill='%231d2420'/%3E%3C/svg%3E");
  /* accents: structure + art only */
  --teal: #2f7f78; --ochre: #c8962b; --rose: #c25a73; --violet: #6b5ba8;
  /* mould palettes (mould.js + wordmark tufts): core, mid, light, rim */
  --m-teal-0: #1f5a55; --m-teal-1: #2f7f78; --m-teal-2: #62ada3; --m-teal-3: #b5ddd5;
  --m-ochre-0: #8a6116; --m-ochre-1: #c8962b; --m-ochre-2: #e3bd5e; --m-ochre-3: #f3e0a8;
  --m-rose-0: #8a3350; --m-rose-1: #c25a73; --m-rose-2: #e290a3; --m-rose-3: #f6cfd8;
  --m-violet-0: #463a7a; --m-violet-1: #6b5ba8; --m-violet-2: #9c8ed2; --m-violet-3: #d6cff0;
  --m-cotton-0: #7f8a80; --m-cotton-1: #aab3a8; --m-cotton-2: #d5dbcf; --m-cotton-3: #ffffff;
  /* the home-page dish */
  --dish-rim: #1d2420; --dish-wall: #dfe3cf; --dish-hi: #ffffff; --dish-agar: #f6f4df; --dish-grain: #ebe8cf;

  --px: 3px;
  --wrap: 1060px;
  --pixel: "Silkscreen", ui-monospace, monospace;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --agar: #07080a;
  --agar-2: #0b0d10;
  --dish: #0e1115;
  /* an unlit Dotz board: faint pixel-round dots */
  --bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' shape-rendering='crispEdges'%3E%3Cg fill='%23ffffff' fill-opacity='.06'%3E%3Crect x='4' y='3' width='2' height='4'/%3E%3Crect x='3' y='4' width='4' height='2'/%3E%3C/g%3E%3C/svg%3E");
  --ink: #e8ebee;           /* 16:1 on --agar */
  --ink-2: #a7b0b8;         /* 8.6:1 on --agar, 8:1 on --dish */
  --ink-3: #7f8992;
  --edge: #3a444e;
  --line: #262e35;
  --shadow: #15191e;
  --wm-shadow: #1f262d;
  --focus: #00e1ff;
  --sel: #00e1ff40;
  --btn-bg: #e8ebee; --btn-fg: #07080a; --btn-drop: #6c7882;
  --field: #07080a; --field-inset: #0b0d10;
  --screen: #050608;
  --ico-fill: #0b0d10; --ico-ring: #8a959f;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h15v3H0zM3 3h9v3H3zM6 6h3v3H6z' fill='%23a7b0b8'/%3E%3C/svg%3E");
  /* the Dotz neons, used sparingly */
  --teal: #00e1ff; --ochre: #ffd400; --rose: #ff1f4f; --violet: #9d2bff;
  /* glowing mould: dark core, dim body, neon rim (rim = the Dotz neon lifted 10% toward white) */
  --m-teal-0: #141f22; --m-teal-1: #193539; --m-teal-2: #175c66; --m-teal-3: #1ae4ff;
  --m-ochre-0: #1e1f18; --m-ochre-1: #35331d; --m-ochre-2: #62581b; --m-ochre-3: #ffd81a;
  --m-rose-0: #1e181b; --m-rose-1: #352026; --m-rose-2: #622332; --m-rose-3: #ff3561;
  --m-violet-0: #1a1822; --m-violet-1: #2a2139; --m-violet-2: #452766; --m-violet-3: #a740ff;
  --m-cotton-0: #14201b; --m-cotton-1: #193828; --m-cotton-2: #176537; --m-cotton-3: #1aff6e;
  --dish-rim: #59646e; --dish-wall: #12161a; --dish-hi: #2a323a; --dish-agar: #0a0c0f; --dish-grain: #161a1f;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; background-color: var(--agar); }
body {
  margin: 0;
  overflow-x: clip;
  background-color: var(--agar);
  background-image: var(--bg-image);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
[data-theme="dark"] body { -webkit-font-smoothing: antialiased; }
main { flex: 1; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
img, svg, canvas { display: block; }
::selection { background: var(--sel); color: var(--ink); }

/* ------------------------------------------------------------------ links + focus */
a { color: var(--ink); text-decoration-line: underline; text-decoration-thickness: 2px;
    text-underline-offset: 4px; text-decoration-color: var(--teal); }
a:hover { text-decoration-thickness: 3px; text-decoration-color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 50; background: var(--ink); color: var(--dish);
        padding: .5rem .8rem; font: 700 .8rem/1 var(--pixel); text-decoration: none; }
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ type */
h1, h2, h3 { font-family: var(--pixel); font-weight: 400; line-height: 1.15; letter-spacing: 0; color: var(--ink); }
h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); margin: 0 0 1rem; }
h2 { font-size: 1.5rem; margin: 3rem 0 1rem; }
h3 { font-size: 1rem; margin: 2rem 0 .4rem; }
p, li { max-width: 64ch; }
strong { font-weight: 600; }
.muted { color: var(--ink-2); }

/* ------------------------------------------------------------------ header */
.bar { position: relative; border-bottom: var(--px) solid var(--edge); background: var(--dish); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.bar-end { display: flex; align-items: center; gap: clamp(.9rem, 3vw, 1.8rem); }
.home-link { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); padding: 6px 0; }
.home-link .dish-ico { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.hm-svg { height: 20px; width: auto; }
.nav { display: flex; gap: clamp(.9rem, 3vw, 1.8rem); }
.nav a { font: 400 .85rem/1 var(--pixel); text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
         padding: .6rem .1rem; border-bottom: var(--px) solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--teal); }

/* theme toggle: a pixel moon (in light) / sun (in dark) */
.bar .theme-toggle {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  background: var(--dish); color: var(--ink); border: var(--px) solid var(--edge);
  box-shadow: 0 4px 0 var(--edge); transform: none; margin-bottom: 4px;
}
.bar .theme-toggle:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--edge); color: var(--ink); }
.bar .theme-toggle:active { transform: translateY(4px); box-shadow: 0 0 0 var(--edge); }
.theme-toggle svg { width: 26px; height: 26px; image-rendering: pixelated; }
.theme-toggle .ico-sun { display: none; color: var(--ochre); }
[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
[data-theme="dark"] .theme-toggle .ico-sun { display: block; filter: drop-shadow(0 0 4px #ffd40099); }

/* ------------------------------------------------------------------ mould canvases */
[data-mould] { position: relative; }
.mould-cv { position: absolute; pointer-events: none; image-rendering: pixelated; z-index: 3; }
.mould-glow { position: absolute; pointer-events: none; z-index: 2; display: none; }
[data-theme="dark"] .mould-glow {
  display: block; filter: blur(5px) saturate(1.3); opacity: .9; mix-blend-mode: screen;
  animation: breathe 6s ease-in-out 1.5s infinite;
}
@keyframes breathe { 50% { opacity: .45; } }
.dish-glow { inset: 0; width: 100%; height: 100%; }
[data-theme="dark"] .dish-glow { filter: blur(6px) saturate(1.3); }

/* ------------------------------------------------------------------ plates (cards) */
.plate {
  position: relative; background: var(--dish);
  border: var(--px) solid var(--edge);
  box-shadow: 6px 6px 0 var(--shadow);
  padding: clamp(1.25rem, 3vw, 2rem);
}
/* stepped pixel corners */
.plate::before {
  content: ""; position: absolute; inset: calc(var(--px) * -1); pointer-events: none;
  background:
    linear-gradient(var(--agar), var(--agar)) top left / var(--px) var(--px) no-repeat,
    linear-gradient(var(--agar), var(--agar)) top right / var(--px) var(--px) no-repeat,
    linear-gradient(var(--agar), var(--agar)) bottom left / var(--px) var(--px) no-repeat,
    linear-gradient(var(--agar), var(--agar)) bottom right / var(--px) var(--px) no-repeat;
}

/* ------------------------------------------------------------------ buttons */
.btn, button {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 400 .95rem/1 var(--pixel); text-transform: uppercase; letter-spacing: .05em;
  padding: 1rem 1.35rem; cursor: pointer; text-decoration: none;
  background: var(--btn-bg); color: var(--btn-fg); border: var(--px) solid var(--btn-bg);
  box-shadow: 0 5px 0 var(--btn-drop); transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.btn:hover, button:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--btn-drop); color: var(--btn-fg); }
.btn:active, button:active { transform: translateY(5px); box-shadow: 0 0 0 var(--btn-drop); }
.btn.ghost { background: var(--dish); color: var(--ink); border-color: var(--edge); box-shadow: 0 5px 0 var(--edge); }
.btn.ghost:hover { box-shadow: 0 3px 0 var(--edge); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; margin-top: 2rem; }

/* ------------------------------------------------------------------ home hero */
.hero { padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2.5rem, 6vw, 4.5rem); }
.hero .wrap { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.wordmark { margin: 0; line-height: 0; }
.wm-svg { width: min(100%, 568px); height: auto; overflow: visible; }
[data-theme="dark"] .wm-svg .tuft { filter: drop-shadow(0 0 3px rgb(0 225 255 / .35)); }
.lede { font-size: clamp(1.15rem, 2.2vw, 1.35rem); line-height: 1.5; margin: 1.5rem 0 0; max-width: 30ch; }
.dish-wrap { position: relative; justify-self: center; width: min(100%, 384px); }
.dish { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.dish-wrap .dish-glow { z-index: 2; }
@media (min-width: 860px) {
  .hero .wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .dish-wrap { justify-self: end; }
}

/* wordmark tufts grow up out of the letters, in steps */
.tuft { animation: tuft 1.1s steps(6, end) both; animation-delay: calc(var(--d) + .2s); }
@keyframes tuft { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.tuft-dot { animation: dot .5s steps(3, end) both; animation-delay: calc(var(--d) + .2s); transform-box: fill-box; transform-origin: center; }
@keyframes dot { from { transform: scale(0); } to { transform: scale(1); } }

/* ------------------------------------------------------------------ sections */
.section { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.section-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.75rem; }
.section-head h2 { margin: 0; }
.section-head::after { content: ""; flex: 1; height: var(--px); background: repeating-linear-gradient(90deg, var(--edge) 0 6px, transparent 6px 12px); align-self: center; }

/* game card */
.game { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; text-decoration: none; color: var(--ink); padding: 0; overflow: visible; }
.game:hover { box-shadow: 9px 9px 0 var(--shadow); transform: translate(-2px, -2px); }
.game-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: center; padding: clamp(1.25rem, 3vw, 2rem); }
.app-icon { width: 96px; height: 96px; border-radius: 22%; border: var(--px) solid var(--edge); background: #05060a; }
[data-theme="dark"] .app-icon { box-shadow: 0 8px 28px #ff1f4f26; }
.game-name { font: 400 1.75rem/1 var(--pixel); display: block; margin-bottom: .45rem; }
.game p { margin: 0; color: var(--ink-2); }
.game .go { display: inline-block; margin-top: .9rem; font: 400 .8rem/1 var(--pixel); text-transform: uppercase; letter-spacing: .06em;
            text-decoration: underline 2px var(--teal); text-underline-offset: 5px; }
.game:hover .go { text-decoration-color: var(--ink); }
/* the Dotz board: dark in both themes, over a faint grid of unlit dots */
.screen {
  background: var(--screen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' shape-rendering='crispEdges'%3E%3Cg fill='%23ffffff' fill-opacity='.05'%3E%3Crect x='4' y='3' width='2' height='4'/%3E%3Crect x='3' y='4' width='4' height='2'/%3E%3C/g%3E%3C/svg%3E");
  border-top: var(--px) solid var(--edge); display: grid; place-items: center; padding: 1.5rem; min-height: 170px;
}
.screen svg { width: min(100%, 260px); height: auto; image-rendering: pixelated; }
@media (min-width: 760px) {
  .game { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0; }
  .screen { border-top: 0; border-left: var(--px) solid var(--edge); }
}

.help-plate { display: grid; gap: 1rem 2rem; align-items: center; }
.help-plate p { margin: 0; }
@media (min-width: 760px) { .help-plate { grid-template-columns: minmax(0, 1fr) auto; } }

/* ------------------------------------------------------------------ inner pages */
.page { padding: clamp(2.25rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3rem); }
.page .wrap > :first-child { margin-top: 0; }
.prose { max-width: 44rem; overflow-wrap: break-word; }
.prose a { overflow-wrap: anywhere; }
.prose ul { padding-left: 0; list-style: none; }
.prose li { position: relative; padding-left: 1.6rem; margin: .55rem 0; --c: var(--teal); }
.prose li:nth-child(4n+2) { --c: var(--ochre); }
.prose li:nth-child(4n+3) { --c: var(--rose); }
.prose li:nth-child(4n+4) { --c: var(--violet); }
.prose li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 9px; background: var(--c); box-shadow: 3px 3px 0 var(--edge); }
.prose h2 { font-size: 1.25rem; margin: 2.75rem 0 .75rem; padding-top: 1.25rem;
            background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px) top left / 100% var(--px) no-repeat; }
.updated { font: 400 .75rem/1 var(--pixel); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin: 0 0 2rem; }
.summary { margin: 1.5rem 0 0; }

.app-head { display: flex; gap: clamp(1rem, 3vw, 1.75rem); align-items: center; }
.app-head .app-icon { width: clamp(88px, 18vw, 128px); height: auto; aspect-ratio: 1; }
.app-head h1 { margin: 0 0 .35rem; font-size: clamp(2.25rem, 7vw, 3.5rem); }
.app-head p { margin: 0; color: var(--ink-2); }
.dotz-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); margin-top: clamp(2rem, 5vw, 3rem); align-items: start; }
@media (min-width: 860px) { .dotz-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.dotz-grid .screen { border: var(--px) solid var(--edge); box-shadow: 6px 6px 0 var(--shadow); min-height: 260px; }
.dotz-grid .screen svg { width: min(100%, 300px); }
.links { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .25rem; }
.links li { --c: var(--teal); }
.links li:nth-child(2) { --c: var(--violet); }
.links li:nth-child(3) { --c: var(--ochre); }
.links a { display: flex; align-items: center; gap: .8rem; padding: .65rem 0; font-weight: 500; }
.links a::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--c); box-shadow: 3px 3px 0 var(--edge); }
.note { border-left: 6px solid var(--teal); padding: .25rem 0 .25rem 1.1rem; }
.note p { margin: 0; }

/* dark: bullets are tiny lit dots */
[data-theme="dark"] .prose li::before,
[data-theme="dark"] .links a::before { box-shadow: 0 0 7px var(--c); }

/* ------------------------------------------------------------------ form */
.form-grid { display: grid; gap: 2rem 3rem; align-items: start; margin-top: 2rem; }
@media (min-width: 900px) { .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); } }
form.help { display: grid; gap: 1.35rem; }
label { display: grid; gap: .4rem; font-weight: 600; font-size: 1rem; }
label small { font-weight: 400; color: var(--ink-2); font-size: .9rem; }
input, select, textarea { font: inherit; font-weight: 400; color: var(--ink); width: 100%; min-width: 0;
  padding: .75rem .85rem; border: var(--px) solid var(--edge); border-radius: 0; background: var(--field);
  box-shadow: inset 3px 3px 0 var(--field-inset); }
select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer;
  background: var(--field) var(--select-arrow) no-repeat right .9rem center; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
textarea { min-height: 10rem; resize: vertical; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
form.help button { justify-self: start; margin-top: .25rem; }
.notice { padding: 1rem 1.1rem; background: var(--dish); border: var(--px) solid var(--edge); border-left: 9px solid var(--teal); margin: 1.5rem 0 0; max-width: 40rem; }
.notice.is-error { border-left-color: var(--rose); }
.notice[hidden] { display: none; }
.aside h2 { font-size: 1rem; margin: 0 0 .75rem; }
.aside p { margin: 0 0 1rem; font-size: .975rem; }
.aside p:last-child { margin: 0; }

/* ------------------------------------------------------------------ 404 */
.lost { display: grid; gap: 2rem; align-items: center; }
.lost .dish-wrap { width: 240px; max-width: 100%; justify-self: start; }
@media (min-width: 760px) { .lost { grid-template-columns: auto minmax(0, 1fr); gap: 3rem; } }

/* ------------------------------------------------------------------ footer */
.foot { margin-top: clamp(3rem, 8vw, 6rem); background: var(--agar-2); border-top: var(--px) solid var(--edge); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; padding-top: 2rem; padding-bottom: 2.25rem; }
.foot .home-link .hm-svg { height: 16px; }
.foot nav { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-size: .95rem; }

/* ------------------------------------------------------------------ small screens + motion */
@media (max-width: 480px) {
  .nav a { font-size: .75rem; }
  .game-main { grid-template-columns: 1fr; }
  .app-icon { width: 80px; height: 80px; }
}
@media (max-width: 400px) {
  .bar .wrap { gap: .6rem; }
  .bar-end { gap: .75rem; }
  .home-link { gap: .5rem; }
  .home-link .dish-ico { width: 28px; height: 28px; }
  .bar .hm-svg { height: 17px; }
}
form.help[hidden] { display: none; }
.icon-hold { display: block; flex: none; }
@media (max-width: 559px) { .dish-wrap { width: min(100%, 288px); } }
.grown .tuft, .grown .tuft-dot { animation: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tuft { clip-path: none; }
}