Webleb - Extraits de Code

HTML CSS JS

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Incredicer Demo — free incremental dice game on Steam</title>
<meta name="description" content="Incredicer Demo is a free, short incremental dice game by pochi. Roll dice, earn money, buy helper hands, extract dark matter. Play the demo on Steam.">
<meta property="og:type" content="website">
<meta property="og:title" content="Incredicer Demo — roll dice, earn money, automate">
<meta property="og:description" content="Free demo of Incredicer, a short incremental dice game by pochi. Play it on Steam.">
<meta property="og:url" content="https://store.steampowered.com/app/4016660/Incredicer_Demo/">
<meta property="og:image" content="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/3929760/5f3e407bcc0ff7a7a69715f224a113c4f90ceeee/header.jpg?t=1788342445">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Incredicer Demo">
<meta name="twitter:description" content="Free demo of Incredicer, a short incremental dice game by pochi. Play it on Steam.">
<meta name="twitter:image" content="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/3929760/5f3e407bcc0ff7a7a69715f224a113c4f90ceeee/header.jpg?t=1788342445">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%2305060a'/%3E%3Crect x='4.5' y='4.5' width='23' height='23' rx='6' fill='none' stroke='%23c6ff3d' stroke-width='2'/%3E%3Ccircle cx='11' cy='11' r='2.3' fill='%23ff2e88'/%3E%3Ccircle cx='21' cy='21' r='2.3' fill='%23c6ff3d'/%3E%3Ccircle cx='21' cy='11' r='2.3' fill='%23c6ff3d'/%3E%3Ccircle cx='11' cy='21' r='2.3' fill='%23ff2e88'/%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600;700&family=JetBrains+Mono:wght@400;700&family=Press+Start+2P&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="crt" aria-hidden="true"></div>

<a class="skip-link" href="#main">Skip to content</a>

<header class="site-head">
  <a class="brand" href="#top">
    <span class="brand__die" aria-hidden="true">⚄</span>
    <span class="brand__text">INCREDICER<em>DEMO</em></span>
  </a>
  <nav class="site-nav" aria-label="Sections">
    <a href="#try">Try the loop</a>
    <a href="#how">How it works</a>
    <a href="#shots">Screens</a>
    <a href="#get">Get the demo</a>
  </nav>
</header>

<section class="hero" id="top">
    <img class="hero__bg" src="assets/hero.jpg" alt="" width="1536" height="864" fetchpriority="high">
    <div class="hero__inner">
      <p class="kicker"><span class="dot" aria-hidden="true"></span> Free demo · Steam · a pochi game</p>
      <h1 class="title">INCREDICER<span class="title__demo">DEMO</span></h1>
      <p class="lede">A short, incremental dice game. Roll dice, earn money, upgrade, and buy
        helper hands to automate your income.</p>
      <div class="hero__cta">
        <a class="btn btn--primary btn--big"
           href="https://store.steampowered.com/app/4016660/Incredicer_Demo/"
           target="_blank" rel="noopener noreferrer">
          <span class="btn__icon" aria-hidden="true">▶</span> Play the demo on Steam
        </a>
        <a class="btn btn--big"
           href="https://store.steampowered.com/app/3929760/Incredicer/"
           target="_blank" rel="noopener noreferrer">Full game · A$ 4.50</a>
      </div>
      <dl class="stats">
        <div><dt>Price</dt><dd>Free</dd></div>
        <div><dt>Demo length</dt><dd>1–3 hrs</dd></div>
        <div><dt>Reviews</dt><dd>93% positive</dd></div>
        <div><dt>Platform</dt><dd>Windows</dd></div>
      </dl>
    </div>
  </section>

<section class="panel" id="try" aria-labelledby="try-title">
    <h2 id="try-title">Try the loop</h2>
    <p class="panel__intro">A toy version of the same loop the demo runs on — press
      <kbd>Roll</kbd> or hit the spacebar, then spend your money before the dice get boring.</p>

<div class="hud" role="status" aria-live="polite">
      <div class="hud__stat"><span>Bank</span><output id="out-bank">$0</output></div>
      <div class="hud__stat"><span>Per roll</span><output id="out-roll">$0</output></div>
      <div class="hud__stat"><span>Per second</span><output id="out-sec">$0</output></div>
      <div class="hud__stat"><span>Dice</span><output id="out-dice">3</output></div>
      <div class="hud__stat"><span>Hands</span><output id="out-hands">0</output></div>
    </div>

<div class="actions">
      <button class="btn btn--primary" id="btn-roll" type="button">Roll</button>
      <button class="btn" id="btn-dice" type="button">Buy dice <span class="cost" id="cost-dice">$25</span></button>
      <button class="btn" id="btn-hand" type="button">Buy helper hand <span class="cost" id="cost-hand">$150</span></button>
      <button class="btn btn--skill" id="btn-skill" type="button">Double roll <span class="cost">10 s</span></button>
      <button class="btn btn--ghost" id="btn-reset" type="button">Reset</button>
    </div>
    <p class="note">Nothing here is saved or sent anywhere — it is just a taste of the game.</p>
  </section>

<section class="panel" id="how" aria-labelledby="how-title">
    <h2 id="how-title">How it works</h2>
    <div class="cards">
      <article class="card">
        <span class="card__num" aria-hidden="true">01</span>
        <h3>Roll dice, earn money</h3>
        <p>Every die you own adds to the payout of a roll. More dice, more money, faster.</p>
      </article>
      <article class="card">
        <span class="card__num" aria-hidden="true">02</span>
        <h3>Automate with helper hands</h3>
        <p>Buy helper hands and they roll for you, so income keeps climbing while you plan.</p>
      </article>
      <article class="card">
        <span class="card__num" aria-hidden="true">03</span>
        <h3>Unlock active skills</h3>
        <p>Active skills let you push a roll much harder for a short window.</p>
      </article>
      <article class="card">
        <span class="card__num" aria-hidden="true">04</span>
        <h3>Extract dark matter</h3>
        <p>Break dice down into dark matter and spend it in a skill tree of upgrades.</p>
      </article>
    </div>
    <p class="line">Casual · Indie · Simulation · Strategy — 26 Steam achievements, about two hours to
      the credits in the full game.</p>
  </section>

<section class="panel" id="shots" aria-labelledby="shots-title">
    <h2 id="shots-title">Screens</h2>
    <p class="panel__intro">Straight from the Steam store page. Click one to open it full size.</p>
    <div class="gallery" id="gallery">
      <a class="shot" href="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/3929760/6adeb7837cfccafbf03d63470f9a6e5706c2729c/ss_6adeb7837cfccafbf03d63470f9a6e5706c2729c.1920x1080.jpg?t=1788342445">
        <img src="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/3929760/6adeb7837cfccafbf03d63470f9a6e5706c2729c/ss_6adeb7837cfccafbf03d63470f9a6e5706c2729c.1920x1080.jpg?t=1788342445" alt="Incredicer gameplay screenshot from the Steam store page" loading="lazy" width="1920" height="1080">
      </a>
      <a class="shot" href="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/3929760/3b042766c394bfd53d8b90a5dfc80ff931a09b61/ss_3b042766c394bfd53d8b90a5dfc80ff931a09b61.1920x1080.jpg?t=1788342445">
        <img src="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/3929760/3b042766c394bfd53d8b90a5dfc80ff931a09b61/ss_3b042766c394bfd53d8b90a5dfc80ff931a09b61.1920x1080.jpg?t=1788342445" alt="Incredicer gameplay screenshot from the Steam store page" loading="lazy" width="1920" height="1080">
      </a>
      <a class="shot" href="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/3929760/7f23bddc64260c1427b5750da5be7cee9dea2f91/ss_7f23bddc64260c1427b5750da5be7cee9dea2f91.1920x1080.jpg?t=1788342445">
        <img src="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/3929760/7f23bddc64260c1427b5750da5be7cee9dea2f91/ss_7f23bddc64260c1427b5750da5be7cee9dea2f91.1920x1080.jpg?t=1788342445" alt="Incredicer gameplay screenshot from the Steam store page" loading="lazy" width="1920" height="1080">
      </a>
      <a class="shot" href="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/3929760/5d57a183a7b1f83a21935671f7b91eda3913811e/ss_5d57a183a7b1f83a21935671f7b91eda3913811e.1920x1080.jpg?t=1788342445">
        <img src="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/3929760/5d57a183a7b1f83a21935671f7b91eda3913811e/ss_5d57a183a7b1f83a21935671f7b91eda3913811e.1920x1080.jpg?t=1788342445" alt="Incredicer gameplay screenshot from the Steam store page" loading="lazy" width="1920" height="1080">
      </a>
    </div>
  </section>

<section class="panel" id="get" aria-labelledby="get-title">
    <h2 id="get-title">Get the demo</h2>
    <p class="panel__intro">The demo is free on Steam — the link below opens its store page.</p>

<ul class="links">
      <li><a href="https://store.steampowered.com/app/4016660/Incredicer_Demo/" target="_blank" rel="noopener noreferrer">Incredicer Demo on Steam</a> — free, Windows</li>
      <li><a href="https://store.steampowered.com/app/3929760/Incredicer/" target="_blank" rel="noopener noreferrer">Incredicer, the full game</a> — A$ 4.50, released 27 Nov 2025</li>
      <li><a href="https://store.steampowered.com/app/4173070/Incredicer__Supporter_Pack/" target="_blank" rel="noopener noreferrer">Supporter Pack</a> — for anyone who wants to tip the developer</li>
    </ul>
  </section>

</main>

<footer class="site-foot">
  <p>Incredicer and Incredicer Demo are made and published by <strong>pochi</strong>. Not affiliated with
    Valve or Steam — store page shown above is the official one.</p>
  <p class="tags">#kindlykeyin #keyin</p>
</footer>

/* ============================================================
   Incredicer Demo — dark arcade stylesheet
   Markup lives in index.html, behaviour in script.js.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --void: oklch(0.16 0.02 265);
  --ink: oklch(0.98 0.01 100);
  --panel: oklch(0.21 0.03 265);
  --panel-2: oklch(0.25 0.04 265);
  --line: oklch(0.4 0.05 265);

--acid: oklch(0.88 0.24 120);
  --acid-soft: oklch(0.88 0.24 120 / 0.16);
  --hot: oklch(0.68 0.26 355);
  --hot-soft: oklch(0.68 0.26 355 / 0.18);
  --cyan: oklch(0.82 0.14 205);

--font-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --font-body: "Chakra Petch", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-pixel: "Press Start 2P", var(--font-mono);

--glow-acid: 0 0 0 1px oklch(0.88 0.24 120 / 0.5), 0 0 22px oklch(0.88 0.24 120 / 0.35);
  --glow-hot: 0 0 0 1px oklch(0.68 0.26 355 / 0.5), 0 0 22px oklch(0.68 0.26 355 / 0.35);
  --shadow: 0 20px 60px oklch(0 0 0 / 0.55);

--radius: 14px;
  --radius-sm: 8px;
  --maxw: 1120px;
  --pad: clamp(1rem, 4vw, 2.5rem);
}

/* ---------- reset-ish ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--void);
  background-image:
    radial-gradient(900px 500px at 12% -5%, var(--acid-soft), transparent 60%),
    radial-gradient(800px 500px at 95% 10%, var(--hot-soft), transparent 60%),
    linear-gradient(oklch(0.3 0.05 265 / 0.18) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.3 0.05 265 / 0.18) 1px, transparent 1px);
  background-size: auto, auto, 100% 44px, 44px 100%;
  background-attachment: fixed;
}

img { max-width: 100%; display: block; }

a { color: var(--acid); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.05; margin: 0; }

:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.6rem 1rem;
  background: var(--acid);
  color: var(--void);
  font-weight: 700;
  z-index: 200;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- CRT overlay ---------- */
.crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 150;
  background-image: repeating-linear-gradient(
    to bottom,
    oklch(0 0 0 / 0.22) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: multiply;
}
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 50%, transparent 55%, oklch(0 0 0 / 0.6));
}

/* ---------- header ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem var(--pad);
  background: oklch(0.16 0.02 265 / 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
}
.brand__die {
  font-size: 1.7rem;
  line-height: 1;
  color: var(--acid);
  text-shadow: 0 0 14px oklch(0.88 0.24 120 / 0.6);
}
.brand__text {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 0.95rem;
}
.brand__text em {
  font-style: normal;
  margin-left: 0.45em;
  color: var(--hot);
}

.site-nav {
  display: flex;
  gap: clamp(0.7rem, 2vw, 1.6rem);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.site-nav a { color: oklch(0.85 0.02 265); text-decoration: none; }
.site-nav a:hover { color: var(--acid); text-shadow: 0 0 12px oklch(0.88 0.24 120 / 0.5); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  min-height: clamp(560px, 82vh, 900px);
  display: grid;
  align-items: center;
  justify-items: stretch;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  filter: saturate(1.1) contrast(1.05);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, oklch(0.16 0.02 265 / 0.7), oklch(0.16 0.02 265 / 0.94)),
    radial-gradient(70% 60% at 50% 40%, transparent, oklch(0.16 0.02 265 / 0.8));
}
.hero__inner {
  position: relative;
  z-index: 2;
  min-width: 0;
  width: min(var(--maxw), 100%);
  margin-inline: auto;
  padding: clamp(3rem, 9vw, 6rem) var(--pad);
  text-align: center;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.4rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: oklch(0.21 0.03 265 / 0.7);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(0.9 0.02 265);
}
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 10px var(--acid);
  animation: blink 1.6s steps(2, end) infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }

.title {
  font-size: clamp(2.9rem, 12vw, 8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow:
    0 0 26px oklch(0.88 0.24 120 / 0.35),
    0 0 60px oklch(0.68 0.26 355 / 0.25);
}
.title__demo {
  display: block;
  font-family: var(--font-pixel);
  font-size: clamp(0.75rem, 2.6vw, 1.5rem);
  letter-spacing: 0.32em;
  color: var(--hot);
  text-shadow: 0 0 18px oklch(0.68 0.26 355 / 0.6);
  margin-top: 0.9rem;
}

.lede {
  max-width: 46ch;
  margin: 1.6rem auto 2.2rem;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: oklch(0.92 0.015 265);
}

.hero__cta {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- buttons ---------- */
.btn {
  --btn-ink: var(--ink);
  --btn-line: var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.72em 1.25em;
  border: 1px solid var(--btn-line);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--btn-ink);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.btn:hover { transform: translateY(-2px); border-color: var(--acid); }
.btn:active { transform: translateY(1px); }
.btn--big { font-size: 1.05rem; padding: 0.85em 1.5em; }
.btn--primary {
  --btn-ink: oklch(0.18 0.03 120);
  --btn-line: var(--acid);
  background: linear-gradient(180deg, oklch(0.93 0.19 120), oklch(0.79 0.24 125));
  box-shadow: var(--glow-acid);
  text-transform: uppercase;
}
.btn--primary:hover { box-shadow: var(--glow-acid), 0 12px 30px oklch(0 0 0 / 0.45); }
.btn--skill { border-color: var(--cyan); color: var(--cyan); }
.btn--ghost { background: transparent; color: oklch(0.8 0.02 265); }
.btn--ghost:hover { color: var(--ink); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn__icon { font-size: 0.8em; }
.cost {
  font-family: var(--font-mono);
  font-size: 0.78em;
  padding: 0.15em 0.5em;
  border-radius: 999px;
  background: oklch(0 0 0 / 0.35);
  color: var(--acid);
}

/* ---------- stats strip ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 1px;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  max-width: 780px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stats > div {
  padding: 0.9rem 0.6rem;
  background: oklch(0.2 0.03 265 / 0.86);
}
.stats dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(0.72 0.03 265);
}
.stats dd {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--acid);
}

/* ---------- panels ---------- */
.panel {
  width: min(var(--maxw), 100%);
  margin-inline: auto;
  padding: clamp(2.6rem, 7vw, 4.5rem) var(--pad);
  border-bottom: 1px solid var(--line);
}
.panel > h2 {
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.7rem;
}
.panel > h2::before {
  content: "// ";
  color: var(--hot);
}
.panel__intro {
  max-width: 62ch;
  margin: 0 0 1.8rem;
  color: oklch(0.87 0.015 265);
}
kbd {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 0.1em 0.45em;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--panel-2);
}

/* ---------- arena / mini game ---------- */
.hud {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.hud__stat {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: oklch(0.19 0.03 265 / 0.8);
}
.hud__stat span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(0.7 0.03 265);
}
.hud__stat output {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hud__stat:first-child output { color: var(--acid); text-shadow: 0 0 14px oklch(0.88 0.24 120 / 0.45); }

.field {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  min-height: 96px;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 120% at 50% 0%, oklch(0.26 0.04 265 / 0.7), oklch(0.17 0.03 265 / 0.9));
}
.die {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  padding: 6px;
  width: 54px;
  height: 54px;
  border: 1px solid oklch(0.82 0.14 205 / 0.55);
  border-radius: 12px;
  background: linear-gradient(160deg, oklch(0.3 0.05 250 / 0.9), oklch(0.2 0.04 260 / 0.9));
  box-shadow: inset 0 0 14px oklch(0.82 0.14 205 / 0.2), 0 0 14px oklch(0.82 0.14 205 / 0.18);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.pip {
  width: 7px;
  height: 7px;
  place-self: center;
  border-radius: 50%;
  background: transparent;
}
.pip.is-on {
  background: var(--cyan);
  box-shadow: 0 0 8px oklch(0.82 0.14 205 / 0.8);
}
.die.is-rolling {
  transform: translateY(-6px) rotate(-8deg);
  border-color: var(--acid);
}
.die.is-rolling .pip.is-on { background: var(--acid); box-shadow: 0 0 10px oklch(0.88 0.24 120 / 0.9); }
.die.is-locked { border-color: var(--hot); box-shadow: 0 0 18px oklch(0.68 0.26 355 / 0.5); }
.die.is-locked .pip.is-on { background: var(--hot); box-shadow: 0 0 10px oklch(0.68 0.26 355 / 0.9); }

.gain {
  position: absolute;
  right: 1rem;
  bottom: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--acid);
  text-shadow: 0 0 10px oklch(0.88 0.24 120 / 0.7);
  animation: rise 900ms ease-out forwards;
  pointer-events: none;
}
@keyframes rise {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-28px); }
}
.field.is-empty { align-items: center; color: oklch(0.7 0.03 265); font-family: var(--font-mono); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.1rem;
}
.note {
  margin: 0.9rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: oklch(0.66 0.03 265);
}

/* ---------- cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}
.card {
  position: relative;
  padding: 1.3rem 1.3rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, oklch(0.23 0.03 265 / 0.85), oklch(0.19 0.03 265 / 0.9));
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--acid), transparent 70%);
  opacity: 0.7;
}
.card:hover { border-color: oklch(0.88 0.24 120 / 0.45); }
.card__num {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  color: var(--hot);
  letter-spacing: 0.1em;
}
.card h3 {
  margin: 0.7rem 0 0.5rem;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}
.card p { margin: 0; color: oklch(0.85 0.015 265); font-size: 0.97rem; }

.line {
  margin: 1.6rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: oklch(0.75 0.03 265);
}

/* ---------- gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.8rem;
}
.shot {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.shot img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(1.05);
  transition: transform 260ms ease, filter 260ms ease;
}
.shot:hover img { transform: scale(1.05); filter: saturate(1.3) brightness(1.08); }
.shot:hover { border-color: var(--acid); box-shadow: var(--glow-acid); }

/* ---------- link box ---------- */
.linkbox {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label label" "input button";
  gap: 0.5rem 0.6rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: oklch(0.19 0.03 265 / 0.85);
}
.linkbox label {
  grid-area: label;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(0.7 0.03 265);
}
.linkbox input {
  grid-area: input;
  width: 100%;
  padding: 0.7em 0.9em;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: oklch(0.14 0.02 265);
  color: var(--acid);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.linkbox .btn { grid-area: button; }

.links {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: oklch(0.8 0.02 265);
}
.links li::before { content: "›  "; color: var(--hot); }
.links a { font-weight: 700; }

/* ---------- footer ---------- */
.site-foot {
  padding: clamp(2rem, 5vw, 3rem) var(--pad);
  width: min(var(--maxw), 100%);
  margin-inline: auto;
  text-align: center;
  color: oklch(0.7 0.02 265);
  font-size: 0.88rem;
}
.site-foot p { margin: 0.4rem 0; }
.tags {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--hot);
}

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: grid;
  place-items: center;
  gap: 1rem;
  padding: 2rem;
  background: oklch(0.1 0.02 265 / 0.94);
  backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: min(1200px, 92vw);
  max-height: 78vh;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: oklch(0.21 0.03 265 / 0.9);
  color: var(--ink);
  font-size: 1.3rem;
  cursor: pointer;
}
.lightbox__close { top: 1.1rem; right: 1.1rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 1.1rem; }
.lightbox__nav--next { right: 1.1rem; }
.lightbox__close:hover,
.lightbox__nav:hover { border-color: var(--acid); color: var(--acid); }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translate(-50%, 200%);
  z-index: 200;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--acid);
  border-radius: 999px;
  background: oklch(0.19 0.03 265 / 0.96);
  color: var(--acid);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  box-shadow: var(--glow-acid);
  transition: transform 280ms ease;
}
.toast.is-shown { transform: translate(-50%, 0); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 500ms ease, transform 500ms ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- hyper mode (konami) ---------- */
body.hyper {
  --acid: oklch(0.9 0.2 200);
  --hot: oklch(0.85 0.2 60);
}
body.hyper .title { text-shadow: 0 0 30px oklch(0.9 0.2 200 / 0.6), 0 0 70px oklch(0.85 0.2 60 / 0.4); }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .site-nav { font-size: 0.7rem; }
  .die { width: 44px; height: 44px; padding: 5px; gap: 2px; }
  .pip { width: 6px; height: 6px; }
  .linkbox { grid-template-columns: 1fr; grid-template-areas: "label" "input" "button"; }
  .linkbox .btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Incredicer Demo — behaviour
   Markup in index.html, looks in styles.css.
   ============================================================ */

(function () {
  "use strict";

/* ---------- tiny helpers ---------- */
  const $ = (sel, root = document) => root.querySelector(sel);
  const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));
  const rand = (n) => Math.floor(Math.random() * n) + 1;

/* ---------- toast ---------- */
  const toastEl = $("#toast");
  let toastTimer;
  function toast(msg) {
    if (!toastEl) return;
    toastEl.textContent = msg;
    toastEl.classList.add("is-shown");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(() => toastEl.classList.remove("is-shown"), 1800);
  }

/* ============================================================
     1. The toy version of the loop
     ============================================================ */
  const PIPS = {
    1: [5],
    2: [1, 9],
    3: [1, 5, 9],
    4: [1, 3, 7, 9],
    5: [1, 3, 5, 7, 9],
    6: [1, 3, 4, 6, 7, 9],
  };

const el = {
    field: $("#field"),
    bank: $("#out-bank"),
    roll: $("#out-roll"),
    sec: $("#out-sec"),
    dice: $("#out-dice"),
    hands: $("#out-hands"),
    btnRoll: $("#btn-roll"),
    btnDice: $("#btn-dice"),
    btnHand: $("#btn-hand"),
    btnSkill: $("#btn-skill"),
    btnReset: $("#btn-reset"),
    costDice: $("#cost-dice"),
    costHand: $("#cost-hand"),
  };

const START = { bank: 0, dice: 3, hands: 0, diceCost: 25, handCost: 150 };
  let state = Object.assign({}, START);
  let faces = [];
  let multiplier = 1;
  let skillLock = false;

function makeDie(face) {
    const die = document.createElement("span");
    die.className = "die";
    die.setAttribute("role", "img");
    die.setAttribute("aria-label", "Die showing " + face);
    for (let cell = 1; cell <= 9; cell++) {
      const pip = document.createElement("i");
      pip.className = PIPS[face].includes(cell) ? "pip is-on" : "pip";
      die.appendChild(pip);
    }
    return die;
  }

function renderDice() {
    if (!el.field) return;
    el.field.textContent = "";
    faces.forEach((face) => el.field.appendChild(makeDie(face)));
  }

function updateHud() {
    const value = faces.reduce((a, b) => a + b, 0);
    const perRoll = value * multiplier;
    const auto = (state.hands * 3.5 * state.dice * multiplier) / 3;
    if (el.bank) el.bank.textContent = money(state.bank);
    if (el.roll) el.roll.textContent = money(perRoll);
    if (el.sec) el.sec.textContent = money(auto) + "/s";
    if (el.dice) el.dice.textContent = state.dice;
    if (el.hands) el.hands.textContent = state.hands;
    if (el.costDice) el.costDice.textContent = money(state.diceCost);
    if (el.costHand) el.costHand.textContent = money(state.handCost);
    if (el.btnDice) el.btnDice.disabled = state.bank < state.diceCost;
    if (el.btnHand) el.btnHand.disabled = state.bank < state.handCost;
  }

function floatGain(amount) {
    if (!el.field) return;
    const tag = document.createElement("span");
    tag.className = "gain";
    tag.textContent = "+" + money(amount);
    el.field.appendChild(tag);
    setTimeout(() => tag.remove(), 900);
  }

function roll(showGain = true) {
    faces = faces.map(() => rand(6));
    refreshDieFaces();
    $$(".die", el.field).forEach((die, i) => {
      die.classList.add("is-rolling");
      setTimeout(() => die.classList.remove("is-rolling"), 180 + i * 25);
    });
    const amount = faces.reduce((a, b) => a + b, 0) * multiplier;
    state.bank += amount;
    if (showGain && amount > 0) floatGain(amount);
    updateHud();
  }

function buyDice() {
    if (state.bank < state.diceCost) return;
    state.bank -= state.diceCost;
    state.dice += 1;
    state.diceCost = Math.round(state.diceCost * 1.55);
    faces.push(rand(6));
    renderDice();
    updateHud();
  }

function buyHand() {
    if (state.bank < state.handCost) return;
    state.bank -= state.handCost;
    state.hands += 1;
    state.handCost = Math.round(state.handCost * 1.75);
    updateHud();
  }

if (el.field) {
    faces = Array.from({ length: state.dice }, () => rand(6));
    renderDice();
    updateHud();

el.btnRoll && el.btnRoll.addEventListener("click", () => roll());
    el.btnDice && el.btnDice.addEventListener("click", buyDice);
    el.btnHand && el.btnHand.addEventListener("click", buyHand);
    el.btnSkill && el.btnSkill.addEventListener("click", useSkill);
    el.btnReset && el.btnReset.addEventListener("click", reset);

// spacebar rolls, unless the player is typing somewhere
    document.addEventListener("keydown", (e) => {
      if (e.code !== "Space" && e.key !== " ") return;
      const t = e.target;
      if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
      if (t && t.tagName === "BUTTON") return;
      e.preventDefault();
      roll();
    });

// helper hands: every 3 s each hand rolls the table once
    setInterval(() => {
      if (state.hands <= 0) return;
      faces = faces.map(() => rand(6));
      refreshDieFaces();
      const amount = faces.reduce((a, b) => a + b, 0) * multiplier * state.hands;
      state.bank += amount;
      floatGain(amount);
      updateHud();
    }, 3000);
  }

/* ============================================================
     2. Copy the store link
     ============================================================ */
  const copyBtn = $("#btn-copy");
  const urlInput = $("#demo-url");

async function copyLink() {
    const url = urlInput ? urlInput.value.trim() : "";
    if (!url) return;
    try {
      await navigator.clipboard.writeText(url);
      toast("Demo link copied");
    } catch (err) {
      urlInput.select();
      try {
        document.execCommand("copy");
        toast("Demo link copied");
      } catch (e) {
        toast("Copy failed — select the link and copy it manually");
      }
    }
  }
  copyBtn && copyBtn.addEventListener("click", copyLink);

/* ============================================================
     3. Screenshot lightbox
     ============================================================ */
  const shots = $$(".shot");
  const box = $("#lightbox");
  const lbImg = $("#lb-img");
  let index = 0;

shots.forEach((shot, i) => {
    shot.addEventListener("click", (e) => {
      e.preventDefault();
      openLightbox(i);
    });
  });
  $("#lb-close") && $("#lb-close").addEventListener("click", closeLightbox);
  $("#lb-prev") && $("#lb-prev").addEventListener("click", () => step(-1));
  $("#lb-next") && $("#lb-next").addEventListener("click", () => step(1));
  box &&
    box.addEventListener("click", (e) => {
      if (e.target === box) closeLightbox();
    });
  document.addEventListener("keydown", (e) => {
    if (!box || box.hidden) return;
    if (e.key === "Escape") closeLightbox();
    if (e.key === "ArrowRight") step(1);
    if (e.key === "ArrowLeft") step(-1);
  });

/* ============================================================
     4. Reveal on scroll
     ============================================================ */
  const revealables = $$(".panel > *, .hero__inner > *");
  revealables.forEach((node) => node.classList.add("reveal"));

if ("IntersectionObserver" in window) {
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return;
          entry.target.classList.add("is-visible");
          io.unobserve(entry.target);
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
    );
    revealables.forEach((node) => io.observe(node));
  } else {
    revealables.forEach((node) => node.classList.add("is-visible"));
  }

/* ============================================================
     5. Konami easter egg
     ============================================================ */
  const CODE = [
    "ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown",
    "ArrowLeft", "ArrowRight", "ArrowLeft", "ArrowRight",
    "b", "a",
  ];
  let progress = 0;
  document.addEventListener("keydown", (e) => {
    const key = e.key.length === 1 ? e.key.toLowerCase() : e.key;
    progress = key === CODE[progress] ? progress + 1 : key === CODE[0] ? 1 : 0;
    if (progress === CODE.length) {
      progress = 0;
      document.body.classList.toggle("hyper");
      toast(
        document.body.classList.contains("hyper")
          ? "Hyper mode"
          : "Back to normal"
      );
    }
  });
})();

Preview

Open Advanced Editor Full Screen