/* Pxoraboard coming-soon page. Self-contained: own fonts and tokens (the
   values are frontend/landing/css/tokens.css's), no external requests. The
   message renders without JavaScript or motion; the game is optional. */

@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/space-grotesk-latin.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/inter-latin.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url("../fonts/jetbrains-mono-latin.woff2") format("woff2")}

:root{
  --ink-1:#0A0A0B; --ink-2:#141416; --ink-3:#1C1C1F; --ink-4:#2A2A2E;
  --paper-0:#FFFFFF; --paper-1:#F5F4F1;
  --amber:#E8B776; --amber-hover:#F0C68C;
  --fg-2:rgba(245,244,241,.72); --fg-3:rgba(245,244,241,.5);
  --line:rgba(255,255,255,.1); --line-strong:rgba(255,255,255,.2);
  --font-display:"Space Grotesk","Inter",system-ui,sans-serif;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --edge:clamp(16px,3vw,32px);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ink-1);color-scheme:dark;-webkit-text-size-adjust:100%}
html:has(dialog[open]){overflow:hidden}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--ink-1);color:var(--paper-1);
  font:400 17px/1.6 var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,canvas{display:block}
button{font:inherit;color:inherit}
h1,h2,p,dl,dd{margin:0}
a{color:inherit}
::selection{background:var(--amber);color:var(--ink-1)}
:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* ---------- viewfinder ---------- */
.finder{position:fixed;inset:var(--edge);pointer-events:none;z-index:0}
.corner{position:absolute;width:22px;height:22px;border:0 solid rgba(245,244,241,.35)}
.corner.tl{top:0;left:0;border-width:1px 0 0 1px}
.corner.tr{top:0;right:0;border-width:1px 1px 0 0}
.corner.bl{bottom:0;left:0;border-width:0 0 1px 1px}
.corner.br{bottom:0;right:0;border-width:0 1px 1px 0}
.finder-label{position:absolute;display:flex;align-items:center;gap:8px;font:400 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);font-variant-numeric:tabular-nums}
.finder-label.tl{top:12px;left:34px}
.finder-label.tr{top:12px;right:34px}
.finder-label.bl{bottom:12px;left:34px}
.finder-label.br{bottom:12px;right:34px}
.tally{width:7px;height:7px;border-radius:50%;background:var(--amber)}
html.motion .tally{animation:tally 2.4s ease-in-out infinite}
@keyframes tally{50%{opacity:.25}}
@media (max-width:560px){ .finder-label.tr,.finder-label.bl{display:none} }

/* ---------- the page ---------- */
.stage{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:96px 24px 32px}
.logo{display:block;padding:12px 16px;margin:0;border:0;background:none;cursor:pointer;border-radius:12px;transition:transform .5s var(--ease)}
.logo img{width:min(560px,78vw);height:auto}
.logo:hover{transform:scale(1.02)}
.logo:active{transform:scale(.99)}
.title{margin-top:clamp(28px,5vh,48px);font:500 clamp(32px,5vw,56px)/1.05 var(--font-display);letter-spacing:-.02em;color:var(--paper-0)}
.lede{margin-top:14px;max-width:440px;color:var(--fg-2);font-size:clamp(16px,1.6vw,18px);text-wrap:balance}
.play{margin-top:clamp(28px,5vh,40px);display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 26px 0 22px;border:0;border-radius:999px;
  background:var(--amber);color:var(--ink-1);font:500 16px/1 var(--font-sans);cursor:pointer;transition:background-color .2s,transform .2s var(--ease)}
.play svg{width:11px;height:13px;fill:currentColor}
.play:hover{background:var(--amber-hover)}
.play:active{transform:scale(.97)}
/* Without the script there is no game: the logo is just the logo. */
html:not(.js) .logo{pointer-events:none}
html:not(.js) .stage > .play{display:none}

.foot{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;gap:12px;padding:0 24px calc(var(--edge) + 40px);font-size:15px;color:var(--fg-2)}
.foot a{text-decoration:none;padding:8px 2px;transition:color .2s}
.foot a:hover{color:var(--amber)}

/* Entrance. */
html.motion .stage > *{animation:rise .9s var(--ease) both}
html.motion .stage > .title{animation-delay:.12s}
html.motion .stage > .lede{animation-delay:.2s}
html.motion .stage > .play{animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}

/* ---------- the game ---------- */
.game{width:min(880px,100vw - 24px);max-width:none;max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line);border-radius:16px;
  background:var(--ink-2);color:var(--paper-1);overflow:hidden;flex-direction:column}
.game[open]{display:flex}
.game:focus,.game:focus-visible{outline:none}
.game::backdrop{background:rgba(0,0,0,.8)}
html.motion .game[open]{animation:pop .35s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.97)}}
.game-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 18px 0 22px}
.game h2{font:500 22px/1.2 var(--font-display);letter-spacing:-.01em;color:var(--paper-0)}
.game-how{margin-top:4px;font-size:14px;color:var(--fg-3)}
.game-close{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:10px;background:transparent;cursor:pointer}
.game-close:hover{background:var(--ink-3)}
.game-close svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none}

.game-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:16px 22px 0}
.game-stats dt{font:400 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.game-stats dd{margin-top:6px;font:500 22px/1 var(--font-display);color:var(--paper-0);font-variant-numeric:tabular-nums}

.game-board{position:relative;margin:14px 22px 0;aspect-ratio:16/10;max-height:calc(100dvh - 250px);min-height:220px;border-radius:8px;overflow:hidden;
  background:var(--ink-1);box-shadow:0 0 0 1px var(--line);touch-action:none;cursor:crosshair}
.game-board canvas{position:absolute;inset:0;width:100%;height:100%}
.game-card{position:absolute;inset:0;margin:auto;width:min(100% - 24px,360px);height:max-content;padding:22px 20px;border-radius:12px;
  background:rgba(10,10,11,.9);box-shadow:0 0 0 1px var(--line-strong);text-align:center;cursor:default}
.game-card-kicker{font:400 11px/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.game-card-title{margin-top:8px;font:500 24px/1.15 var(--font-display);color:var(--paper-0)}
.game-card-line{margin-top:8px;font-size:14px;line-height:1.5;color:var(--fg-2)}
.game-card-line:empty{display:none}
.game-card-actions{margin-top:16px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.play-small{margin-top:0;min-height:44px;padding:0 22px;text-decoration:none}
.play-quiet{background:transparent;color:var(--paper-1);box-shadow:inset 0 0 0 1px var(--line-strong)}
.play-quiet:hover{background:var(--ink-3)}
.game-card-prize{margin-top:10px;font:600 clamp(44px,8vw,64px)/1 var(--font-display);letter-spacing:-.02em;color:var(--amber)}
.game-card.is-fail .game-card-kicker{color:#D17468}

/* Cameras: three film cameras; a lost one is cracked and dimmed. */
.lives{display:flex;gap:6px;align-items:center;height:22px}
.cam{width:26px;height:22px;fill:none;stroke:var(--amber);stroke-width:1.5;stroke-linejoin:round}
.cam .crack{stroke:#D17468;stroke-width:1.6;opacity:0}
.cam.is-lost{stroke:rgba(245,244,241,.28)}
.cam.is-lost .crack{opacity:1}
html.motion .cam.is-breaking{animation:break .5s ease-out}
@keyframes break{20%{transform:translateX(-3px) rotate(-8deg)}40%{transform:translateX(3px) rotate(6deg)}60%{transform:translateX(-2px) rotate(-3deg)}100%{transform:none}}

.game-keys{padding:14px 22px 18px;font:400 11px/1.6 var(--font-mono);letter-spacing:.06em;color:var(--fg-3);text-align:center}
.keys-touch{display:none}
@media (pointer:coarse){ .keys-fine{display:none} .keys-touch{display:inline} }

@media (max-width:560px){
  .game{width:100vw;max-height:100dvh;height:100dvh;border-radius:0;border:0;padding-bottom:env(safe-area-inset-bottom)}
  .game-head{padding:14px 12px 0 16px}
  .game-stats{padding:12px 16px 0}
  .game-stats dd{font-size:19px}
  .cam{width:22px;height:19px}
  .lives{gap:3px}
  .game-board{aspect-ratio:4/5;max-height:calc(100dvh - 230px);margin:16px 16px 0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}