1/* ---------- fonts (Geist Pixel, vendored, SIL OFL) ---------- */2@font-face {3 font-family: "Geist Pixel Square";4 src: url("/fonts/GeistPixel-Square.woff2") format("woff2");5 font-weight: 400;6 font-display: swap;7}89/* ---------- tokens ---------- */10:root {11 --moss-0: #0a120a;12 --moss-1: #122411;13 --moss-2: #1f3a1c;14 --moss-3: #3e5f33;15 --moss-hi: #2e4a2a;16 --parch: #f4ebcf;17 --parch-2: #e6dab0;18 --parch-hi: #fff8dd;19 --parch-lo: #b7a97b;20 --ink: #0b1209;21 --gold: #f2cb55;22 --gold-hi: #fff2b8;23 --gold-lo: #c99a24;24 --madder: #b8483d;25 --text-dim: #8ea36f;26 --text-soft: #cfd8b4;27 --font-title: "Geist Pixel Square", ui-monospace, Menlo, monospace;28 --font-pixel: "Geist Pixel Square", ui-monospace, Menlo, monospace;29 --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,30 "Helvetica Neue", Arial, sans-serif;31 --bevel-parch: inset 2px 2px 0 var(--parch-hi), inset -2px -2px 032 var(--parch-lo);33 --bevel-moss: inset 2px 2px 0 var(--moss-hi), inset -2px -2px 0 #050905;34 --press-shadow: 4px 4px 0 var(--ink);35 --step: steps(2, end);36}3738/* ---------- reset ---------- */39*,40*::before,41*::after {42 box-sizing: border-box;43}44* {45 margin: 0;46}47button {48 color: inherit;49}50button,51[role="button"] {52 cursor: pointer;53}54img,55svg {56 display: block;57}58img,59video {60 max-width: 100%;61 height: auto;62}63button,64input,65textarea,66select {67 font: inherit;68}6970html {71 width: 100%;72 height: 100%;73 line-height: 1.4;74 -webkit-text-size-adjust: 100%;75 font-family: var(--font-body);76 background: var(--moss-0);77 color: var(--parch);78 overscroll-behavior: none;79 overflow: hidden;80}8182body {83 width: 100%;84 height: 100%;85 margin: 0;86 position: fixed;87 inset: 0;88 background: var(--moss-0);89 overscroll-behavior: none;90 overflow: hidden;91 user-select: none;92 -webkit-user-select: none;93}9495:focus-visible {96 outline: 3px solid var(--gold);97 outline-offset: 2px;98}99100/* ---------- shared primitives ---------- */101.px {102 font-family: var(--font-pixel);103 letter-spacing: 0.02em;104}105106.panel {107 border: 2px solid var(--ink);108 background: var(--moss-1);109 color: var(--parch);110 box-shadow: var(--bevel-moss);111}112113.panel--parch {114 background: var(--parch);115 color: var(--ink);116 box-shadow: var(--bevel-parch);117}118119.btn {120 display: inline-flex;121 align-items: center;122 justify-content: center;123 gap: 0.45rem;124 min-height: 2.6rem;125 padding: 0.45rem 0.9rem;126 border: 2px solid var(--ink);127 background: var(--gold);128 color: var(--ink);129 font-family: var(--font-pixel);130 font-size: 1rem;131 line-height: 1;132 text-decoration: none;133 white-space: nowrap;134 box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo),135 var(--press-shadow);136 transition: transform 60ms var(--step), box-shadow 60ms var(--step);137}138.btn:hover {139 background: #ffd86a;140}141.btn:active,142.btn.is-pressed {143 transform: translate(3px, 3px);144 box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo),145 1px 1px 0 var(--ink);146}147.btn--ghost {148 background: var(--parch-2);149 box-shadow: var(--bevel-parch), var(--press-shadow);150}151.btn--ghost:hover {152 background: var(--parch);153}154.btn--ghost:active {155 box-shadow: var(--bevel-parch), 1px 1px 0 var(--ink);156}157.btn--icon {158 min-width: 2.6rem;159 padding: 0.35rem;160 font-size: 1.15rem;161}162.btn--sm {163 min-height: 2.15rem;164 padding: 0.3rem 0.6rem;165 font-size: 0.85rem;166 box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo),167 3px 3px 0 var(--ink);168}169.btn--sm.btn--ghost {170 box-shadow: var(--bevel-parch), 3px 3px 0 var(--ink);171}172.btn[disabled],173.btn.is-disabled {174 opacity: 0.45;175 pointer-events: none;176}177.btn__blink {178 animation: blink 1s steps(1, end) infinite;179}180@keyframes blink {181 50% {182 opacity: 0;183 }184}185186.label {187 font-family: var(--font-pixel);188 font-size: 0.72rem;189 letter-spacing: 0.08em;190 text-transform: uppercase;191 color: var(--text-dim);192}193194/* ---------- logo ---------- */195.delta-mark {196 overflow: visible;197 flex-shrink: 0;198}199.delta-mark__ring {200 fill: none;201 stroke: #fff;202 stroke-width: 2;203 stroke-linecap: round;204 stroke-linejoin: round;205}206.delta-mark--black .delta-mark__ring {207 stroke: #000;208}209.delta-mark__delta {210 fill: none;211 stroke: var(--gold);212 stroke-width: 2;213 stroke-linecap: round;214 stroke-linejoin: round;215}216.delta-mark--flicker .delta-mark__delta {217 animation: flick 1.3s steps(1, end) infinite;218}219@keyframes flick {220 0%,221 100% {222 stroke: var(--gold);223 }224 35% {225 stroke: #ffe089;226 }227 50% {228 stroke: var(--gold-lo);229 }230 62% {231 stroke: #ffe089;232 }233}234235/* =====================================================================236 HOME — title screen237 ===================================================================== */238.home {239 position: fixed;240 inset: 0;241 height: 100svh;242 overflow: hidden;243 display: grid;244 place-items: center;245 padding: max(0.75rem, env(safe-area-inset-top))246 max(0.75rem, env(safe-area-inset-right))247 max(0.75rem, env(safe-area-inset-bottom))248 max(0.75rem, env(safe-area-inset-left));249 background: linear-gradient(250 180deg,251 #1a2a4a 0,252 #10203a 28%,253 #0f180d 60%,254 var(--moss-0) 100%255 );256}257.home::after {258 content: "";259 position: absolute;260 inset: 0;261 pointer-events: none;262 background: repeating-linear-gradient(263 0deg,264 rgba(0, 0, 0, 0.14) 0 2px,265 transparent 2px 4px266 );267 mix-blend-mode: multiply;268}269270.home__frame {271 position: relative;272 z-index: 1;273 width: min(100%, 30rem);274 max-height: 100%;275 display: grid;276 grid-template-areas:277 "scene"278 "copy";279 grid-template-rows: minmax(0, 1fr) auto;280 gap: 1rem;281}282283.home__scene {284 grid-area: scene;285 position: relative;286 min-height: 0;287 display: grid;288 place-items: end center;289}290291.keep-scene {292 width: 100%;293 max-height: 100%;294 height: auto;295 image-rendering: pixelated;296 image-rendering: crisp-edges;297}298.keep-scene__windows {299 animation: flick 1.3s steps(1, end) infinite;300}301.keep-scene__flag {302 transform-origin: 32px 0;303 animation: flag 0.8s steps(2, end) infinite;304}305@keyframes flag {306 50% {307 transform: scaleX(0.7);308 }309}310.keep-scene__stars rect:nth-child(odd) {311 animation: blink 2.6s steps(1, end) infinite;312}313.keep-scene__stars rect:nth-child(even) {314 animation: blink 3.4s steps(1, end) infinite reverse;315}316317.home__banner {318 position: absolute;319 top: 0;320 width: 1.6rem;321 height: 2.4rem;322 background: var(--madder);323 border: 2px solid var(--ink);324 clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);325 animation: flap 0.8s steps(2, end) infinite;326}327.home__banner--left {328 left: 0.5rem;329}330.home__banner--right {331 right: 0.5rem;332 animation-delay: 0.4s;333}334@keyframes flap {335 50% {336 transform: skewX(-6deg);337 }338}339340.home__copy {341 grid-area: copy;342 display: grid;343 gap: 0.9rem;344 justify-items: center;345 text-align: center;346}347348.home__title {349 font-family: var(--font-title);350 font-weight: 400;351 font-size: clamp(2.2rem, 11vw, 3.6rem);352 line-height: 1;353 color: var(--gold);354 text-shadow: 3px 3px 0 var(--ink);355 text-wrap: balance;356}357358.home__stats {359 display: flex;360 flex-wrap: wrap;361 justify-content: center;362 gap: 0.4rem 1.2rem;363 font-family: var(--font-pixel);364 font-size: 0.95rem;365 color: var(--text-soft);366}367.home__stats b {368 font-weight: 400;369 color: var(--parch);370}371372.home__actions {373 display: flex;374 flex-wrap: wrap;375 justify-content: center;376 gap: 0.75rem;377}378379.home__foot {380 display: flex;381 align-items: center;382 gap: 0.5rem;383 color: #6f855a;384}385386/* landscape / wide: scene left, copy right */387@media (min-aspect-ratio: 5/4) {388 .home__frame {389 width: min(100%, 60rem);390 grid-template-areas: "scene copy";391 grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 0.9fr);392 grid-template-rows: minmax(0, 1fr);393 align-items: center;394 gap: 2rem;395 }396 .home__scene {397 place-items: center;398 }399 .home__copy {400 justify-items: start;401 text-align: left;402 }403 .home__stats,404 .home__actions {405 justify-content: flex-start;406 }407}408409/* =====================================================================410 PLAY411 ===================================================================== */412.play {413 position: fixed;414 inset: 0;415 height: 100svh;416 overflow: hidden;417 background: radial-gradient(circle at 50% 0%, #1a3016 0, transparent 60%),418 var(--moss-0);419 color: var(--parch);420}421422.play__frame {423 height: 100%;424 width: min(100%, 34rem);425 margin: 0 auto;426 display: grid;427 grid-template-areas:428 "header"429 "hud"430 "board"431 "tray";432 grid-template-rows: auto auto minmax(0, 1fr) auto;433 gap: 0.6rem;434 padding: max(0.6rem, env(safe-area-inset-top))435 max(0.6rem, env(safe-area-inset-right))436 max(0.6rem, env(safe-area-inset-bottom))437 max(0.6rem, env(safe-area-inset-left));438}439440.play__header {441 grid-area: header;442 display: grid;443 grid-template-columns: auto auto minmax(0, 1fr) auto;444 align-items: center;445 gap: 0.45rem;446 padding: 0.45rem 0.55rem;447}448449.play__home {450 display: inline-flex;451 align-items: center;452 gap: 0.35rem;453 color: var(--parch);454 text-decoration: none;455}456457.play__day {458 display: grid;459 justify-items: center;460 min-width: 0;461 line-height: 1.05;462}463.play__date {464 font-family: var(--font-pixel);465 font-weight: 400;466 font-size: clamp(1rem, 4vw, 1.25rem);467 color: var(--gold);468 text-shadow: 2px 2px 0 var(--ink);469 white-space: nowrap;470}471472.play__hint {473 grid-column: 1 / -1;474 margin-top: 0.2rem;475 font-size: 0.78rem;476 color: var(--text-dim);477 text-align: center;478 white-space: nowrap;479 overflow: hidden;480 text-overflow: ellipsis;481}482483.game {484 display: contents;485}486487.hud {488 grid-area: hud;489 display: flex;490 flex-wrap: wrap;491 align-items: center;492 justify-content: space-between;493 gap: 0.4rem 0.55rem;494 padding: 0.45rem 0.6rem;495 font-family: var(--font-pixel);496 font-size: 0.9rem;497}498.hud--solved {499 background: var(--moss-2);500}501.hud__rooms {502 display: flex;503 flex-wrap: wrap;504 gap: 3px;505 max-width: 50%;506}507.hud__rooms i {508 width: 9px;509 height: 9px;510 background: var(--moss-3);511 border: 1px solid var(--ink);512 transition: background 120ms var(--step);513}514.hud__rooms i.on {515 background: var(--gold);516}517.hud__count {518 color: var(--parch);519}520.hud__count small {521 color: var(--text-dim);522 font-size: 0.75em;523}524.hud__actions {525 display: flex;526 gap: 0.4rem;527 flex-shrink: 0;528}529.hud__msg {530 flex: 1 1 100%;531 order: 10;532 min-width: 0;533 font-family: var(--font-body);534 font-size: 0.78rem;535 color: var(--text-soft);536 white-space: nowrap;537 overflow: hidden;538 text-overflow: ellipsis;539}540541/* board sizes itself from its container in every orientation */542.board-wrap {543 grid-area: board;544 min-height: 0;545 min-width: 0;546 container-type: size;547 display: grid;548 place-items: center;549}550551.board {552 width: min(100cqw, 100cqh);553 aspect-ratio: 1 / 1;554 display: grid;555 padding: 3px;556 border: 2px solid var(--ink);557 background: var(--parch-2);558 background-image: radial-gradient(#c9bb8c 1px, transparent 1.3px);559 background-size: 8px 8px;560 box-shadow: inset 3px 3px 0 #6d6247, inset -3px -3px 0 var(--parch-hi);561 touch-action: none;562 user-select: none;563 -webkit-user-select: none;564 overscroll-behavior: none;565}566.board.is-shake {567 animation: shake 220ms steps(4, end);568}569@keyframes shake {570 25% {571 transform: translateX(-3px);572 }573 50% {574 transform: translateX(3px);575 }576 75% {577 transform: translateX(-2px);578 }579}580581.cell {582 position: relative;583 width: 100%;584 aspect-ratio: 1 / 1;585 display: grid;586 place-items: center;587 padding: 0;588 border: 0;589 background: transparent;590 color: var(--ink);591 font-family: var(--font-pixel);592 font-size: clamp(0.7rem, min(3.6cqw, 3.6cqh), 1.15rem);593 line-height: 1;594 touch-action: none;595 -webkit-tap-highlight-color: transparent;596}597.cell.is-filled {598 background: var(--cell-color);599 box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35),600 inset -2px -2px 0 rgba(0, 0, 0, 0.28);601}602.cell.is-preview {603 background: rgba(242, 203, 85, 0.35);604 box-shadow: inset 0 0 0 2px var(--gold-lo);605}606.cell.is-active {607 box-shadow: inset 0 0 0 3px var(--gold),608 inset 3px 3px 0 rgba(255, 255, 255, 0.35),609 inset -3px -3px 0 rgba(0, 0, 0, 0.28);610}611.cell__num {612 padding: 0.05em 0.3em;613 background: var(--ink);614 color: var(--parch);615 box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);616}617.cell.is-active .cell__num {618 background: var(--gold);619 color: var(--ink);620}621.cell.is-new {622 animation: pop 140ms steps(3, end);623}624@keyframes pop {625 0% {626 transform: scale(0.85);627 filter: brightness(1.6);628 }629 100% {630 transform: none;631 filter: none;632 }633}634.cell.is-lit {635 animation: lit 900ms steps(3, end) both;636}637@keyframes lit {638 0% {639 background: var(--cell-color);640 }641 30% {642 background: var(--gold);643 }644 100% {645 background: var(--cell-color);646 }647}648649/* tray: clue tokens, or the result card once solved */650.tray {651 grid-area: tray;652 min-width: 0;653}654655.tokens {656 display: grid;657 grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr));658 gap: 0.3rem;659}660.token {661 display: inline-flex;662 align-items: center;663 justify-content: center;664 gap: 0.2rem;665 min-height: 2.15rem;666 padding: 0.15rem 0.1rem;667 border: 2px solid var(--ink);668 background: var(--parch-2);669 color: var(--ink);670 font-family: var(--font-pixel);671 font-size: 0.95rem;672 line-height: 1;673 box-shadow: var(--bevel-parch);674}675.token__sym {676 font-size: 0.65em;677 opacity: 0.7;678}679.token.is-placed {680 background: var(--token-color);681 color: var(--parch);682 text-shadow: 1px 1px 0 var(--ink);683 box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35),684 inset -2px -2px 0 rgba(0, 0, 0, 0.35);685}686.token.is-placed .token__sym {687 opacity: 0.85;688}689.token.is-active {690 outline: 3px solid var(--gold);691 outline-offset: -3px;692}693694.result {695 display: grid;696 gap: 0.6rem;697 padding: 0.7rem;698 text-align: center;699 justify-items: center;700 animation: rise 220ms steps(4, end);701}702@keyframes rise {703 from {704 transform: translateY(8px);705 opacity: 0;706 }707}708.result__rank {709 font-family: var(--font-title);710 font-weight: 400;711 font-size: 1.1rem;712 color: var(--gold);713 text-shadow: 2px 2px 0 var(--ink);714}715.result__stats {716 width: 100%;717 display: grid;718 grid-template-columns: repeat(3, minmax(0, 1fr));719 gap: 0.4rem;720}721.result__stats div {722 border: 2px solid var(--ink);723 background: var(--moss-2);724 padding: 0.4rem 0.2rem;725 box-shadow: inset 2px 2px 0 #3a5c34, inset -2px -2px 0 var(--moss-0);726}727.result__stats b {728 display: block;729 font-family: var(--font-pixel);730 font-weight: 400;731 font-size: 1.25rem;732 color: var(--parch);733 font-variant-numeric: tabular-nums;734}735.result__actions {736 display: flex;737 flex-wrap: wrap;738 justify-content: center;739 gap: 0.5rem;740}741742/* landscape / square-ish: board left, everything else in a right rail */743@media (min-aspect-ratio: 5/4) {744 .play__frame {745 width: 100%;746 max-width: 72rem;747 grid-template-areas:748 "board header"749 "board hud"750 "board tray"751 "board .";752 grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem);753 grid-template-rows: auto auto auto minmax(0, 1fr);754 column-gap: 1rem;755 }756 .hud__rooms {757 max-width: 100%;758 }759 .hud__msg {760 white-space: normal;761 }762 .tokens {763 grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr));764 }765}766767/* short landscape phones: tighten */768@media (min-aspect-ratio: 5/4) and (max-height: 480px) {769 .play__frame {770 gap: 0.4rem;771 padding-block: max(0.4rem, env(safe-area-inset-top))772 max(0.4rem, env(safe-area-inset-bottom));773 }774 .play__hint {775 display: none;776 }777}778779.play__notfound {780 padding: 1rem;781}782783@media (prefers-reduced-motion: reduce) {784 *,785 *::before,786 *::after {787 animation: none ;788 transition: none ;789 }790}