:root{--ink:#f4efe2;--muted:#b9c7c0;--pad:#4fae5a;--deep:#0e2a3a;--card:#13384a;--line:#2a5568;--gold:#ffcf7a}
*{box-sizing:border-box}
body{margin:0;background:var(--deep);color:var(--ink);font:16px/1.5 "Trebuchet MS",system-ui,sans-serif}
header{padding:28px 16px 8px;text-align:center}
h1{margin:0;font-size:clamp(2rem,7vw,3.4rem);letter-spacing:.02em;color:var(--gold);text-shadow:0 3px 0 #7e3f1d}
.tag{margin:4px 0 0;color:var(--muted)}
main{max-width:960px;margin:0 auto;padding:0 16px 40px}
.pond{position:relative;margin:18px 0 6px;border-radius:18px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.45);
  aspect-ratio:16/10;background:url(/content/03d2aeeb365b2ab3f4de47ebb0dafb73550e981f99dc90553969a4c3f4e86432i0) center/cover;touch-action:manipulation;cursor:pointer}
.pond canvas{position:absolute;inset:0;width:100%;height:100%}
.night{position:absolute;inset:0;background:#06102a;pointer-events:none;transition:opacity 2s}
.hud{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.92rem}
.hud b{color:var(--gold)}
section{margin-top:26px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
h2{margin:0 0 8px;font-size:1.25rem;color:var(--gold)}
.grid{display:grid;grid-template-columns:auto repeat(8,minmax(0,46px));justify-content:start;gap:6px;align-items:center}
.grid span{font-size:.8rem;color:var(--muted);padding-right:4px}
.cell{aspect-ratio:1;border-radius:50%;border:2px solid var(--line);background:#0b2230;cursor:pointer;transition:transform .1s}
.cell.on{background:var(--pad);border-color:#8fe39a;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25)}
.cell.now{transform:scale(1.15);border-color:var(--gold)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
button{font:inherit;font-weight:700;border:0;border-radius:999px;padding:9px 18px;background:var(--gold);color:#3b2410;cursor:pointer}
button.ghost{background:transparent;color:var(--gold);border:2px solid var(--gold)}
input[type=range]{accent-color:var(--pad)}
.fortune{min-height:3.2em;font-size:1.15rem;font-style:italic;margin:6px 0 0}
.chain{color:var(--muted);font-size:.85rem}
.chain code{color:var(--ink);overflow-wrap:anywhere}
footer{text-align:center;color:var(--muted);font-size:.8rem;padding:10px 16px 30px}