/* Play with Jev: every Jev game and tool on one page. TypeSafe's palette (typesafe.ai, 2026-10-15): pink #f386a1,
   magenta #d45bb6, a sky-blue cloud, near-black #1e1e1e, retro OS windows on a dotted pink field. Pink leads. */
:root { --jv-edge: #1e1e1e; --jv-pink: #f386a1; --jv-magenta: #d45bb6; --jv-sky: #8cc4e8; --jv-ink: #1e1e1e; --jv-paper: #fefefe; --jv-dot: rgb(30 30 30 / .16); }
:root[data-theme="dark"] { --jv-edge: var(--ink); --jv-pink: #ff8fb0; --jv-magenta: #e36ccb; --jv-sky: #5b9cc8; --jv-paper: #1f1b24; --jv-dot: rgb(255 255 255 / .12); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --jv-edge: var(--ink); --jv-pink: #ff8fb0; --jv-magenta: #e36ccb; --jv-sky: #5b9cc8; --jv-paper: #1f1b24; --jv-dot: rgb(255 255 255 / .12); }
}

.pj { padding-top: 1.5rem; }

/* the hero: TypeSafe's cloud, pink and magenta through sky */
.pj-hero { position: relative; padding: 34px 20px 30px; text-align: center; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  background: radial-gradient(60% 90% at 12% 20%, var(--jv-magenta) 0, transparent 70%), radial-gradient(55% 80% at 90% 30%, var(--jv-pink) 0, transparent 70%),
    radial-gradient(70% 90% at 55% 0%, var(--jv-sky) 0, transparent 75%), linear-gradient(180deg, var(--jv-sky), var(--jv-pink)); }
.pj-os { position: absolute; left: 10px; top: 10px; margin: 0; padding: 3px 7px; font: 600 .8rem/1 ui-monospace, Menlo, Consolas, monospace; color: var(--jv-pink); background: var(--jv-ink); }
.pj-title { margin: 12px 0 0; font: 700 clamp(2.7rem, 13vw, 4.2rem)/1 var(--pixel); color: #fff; letter-spacing: .03em; text-shadow: 3px 3px 0 var(--jv-ink), -1px -1px 0 var(--jv-ink), 1px -1px 0 var(--jv-ink), -1px 1px 0 var(--jv-ink); }
.pj-sub { display: inline-block; margin: 14px 0 0; padding: 8px 12px; font-size: 1.05rem; line-height: 1.4; color: var(--jv-ink); background: var(--jv-paper); border: 2px solid var(--jv-ink); }
:root[data-theme="dark"] .pj-sub { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pj-sub { color: var(--ink); } }

/* the stage: a dotted pink field, the tools as windows on it */
.pj-stage { margin: 26px 0 0; padding: 22px 16px; background-color: var(--jv-pink); background-image: radial-gradient(var(--jv-dot) 1.2px, transparent 1.6px); background-size: 12px 12px; border: 3px solid var(--ink); }
.pj-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.pj-card { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; background: var(--card); border: 3px solid var(--jv-edge);
  box-shadow: 6px 6px 0 var(--jv-edge); transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
.pj-cards li:nth-child(3n + 1) .pj-card { --tilt: -1deg; }
.pj-cards li:nth-child(3n + 2) .pj-card { --tilt: .8deg; }
.pj-cards li:nth-child(3n) .pj-card { --tilt: -.6deg; }
.pj-card:hover, .pj-card:focus-visible { transform: translate(-3px, -3px) rotate(var(--tilt, 0deg)); box-shadow: 9px 9px 0 var(--jv-edge); outline: none; }
.pj-card:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--jv-edge); }
.pj-card:focus-visible { box-shadow: 9px 9px 0 var(--jv-edge), 0 0 0 4px var(--jv-paper); }
.pj-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; font: 600 .85rem/1 ui-monospace, Menlo, Consolas, monospace; color: var(--jv-pink); background: var(--jv-ink); }
.pj-bar i { font-style: normal; letter-spacing: .25em; color: var(--jv-paper); opacity: .8; }
.pj-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 3px solid var(--jv-edge); background: var(--bg); }
.pj-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 14px 16px; }
.pj-name { font: 700 1.6rem/1.05 var(--pixel); color: var(--jv-magenta); }
.pj-desc { font-size: 1rem; line-height: 1.45; }
.pj-go { align-self: flex-start; margin-top: auto; padding: 9px 16px 8px; font: 700 1.15rem/1 var(--pixel); color: #fff; background: var(--jv-magenta); border: 3px solid var(--jv-edge); box-shadow: 3px 3px 0 var(--jv-edge); }
.pj-body .pj-go { margin-top: 10px; }

/* wider screens: each tool a wide window, its picture on the left */
@media (min-width: 620px) {
  .pj-card { display: grid; grid-template-columns: 52% 1fr; grid-template-rows: auto 1fr; }
  .pj-bar { grid-column: 1 / -1; }
  .pj-card img { height: 100%; border-bottom: 0; border-right: 3px solid var(--jv-edge); }
  .pj-body { padding: 18px 18px 20px; justify-content: center; }
  .pj-name { font-size: 1.9rem; }
}

.pj-foot { margin: 18px 0 0; text-align: center; font-size: .95rem; color: var(--muted); }

@media (max-width: 480px) {
  .pj-hero { padding: 40px 14px 22px; }
  .pj-stage { padding: 16px 12px; margin-left: -6px; margin-right: -6px; }
}
@media (prefers-reduced-motion: reduce) { .pj-card, .pj-card:hover, .pj-card:focus-visible { transition: none; transform: none; } }