@property --dz { syntax: '<number>'; inherits: false; initial-value: 0; }

:root {
  --bg: #DCE7ED;
  --ink: #16323F;
  --muted: #5B7684;
  --rule: #B4C8D2;
  --veil: rgba(220, 231, 237, .86);
  --btn: #16323F;
  --btn-ink: #EAF2F6;

  --floor: #93A7AB;
  --water: rgba(30, 122, 158, .52);
  --water-line: rgba(255, 255, 255, .10);
  --sand-top: #E6D3A8;
  --sand-y: #D3BC8E;
  --sand-x: #B9A275;
  --bld-top: #F7F4ED;
  --bld-y: #C4C1B8;
  --bld-x: #8F8D86;
  --win: #5E7C90;
  --scf: #A9B2B7;
  --scf-line: rgba(30, 40, 46, .28);
  --crn-top: #E9B949;
  --crn-y: #C99A2E;
  --crn-x: #9C7620;
  --crn-mark: #3A3122;
  --brc-top: #6F7C86;
  --brc-y: #56626B;
  --brc-x: #3D474F;
  --brc-line: rgba(255,255,255,.22);
  --brk-top: #7FA3B8;
  --brk-y: #62879C;
  --brk-x: #476578;
  --brk-line: rgba(255,255,255,.28);
  --ok: #2E9E6B;
  --ok-soft: rgba(46, 158, 107, .38);
  --bad: rgba(196, 66, 66, .35);
  --s: 56px;
  --n: 6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D1B25; --ink: #E4EEF3; --muted: #8AA3B1; --rule: #27404E;
    --veil: rgba(13, 27, 37, .86); --btn: #E4EEF3; --btn-ink: #0D1B25;
    --floor: #1E3240; --water: rgba(24, 104, 142, .58); --water-line: rgba(255,255,255,.07);
    --sand-top: #AE9A70; --sand-y: #8C7A56; --sand-x: #6C5E42;
    --bld-top: #DEDACF; --bld-y: #7E7C75; --bld-x: #4A4945; --win: #FFC46B;
    --scf: #5B676F; --scf-line: rgba(0, 0, 0, .35);
    --crn-top: #F2C55A; --crn-y: #B98C2A; --crn-x: #83621C; --crn-mark: #2A2418;
    --brc-top: #7E8B95; --brc-y: #55616A; --brc-x: #363F46; --brc-line: rgba(255,255,255,.2);
    --brk-top: #6F98B0; --brk-y: #4E7890; --brk-x: #35566A; --brk-line: rgba(255,255,255,.25);
  }
}
:root[data-theme="dark"] {
  --bg: #0D1B25; --ink: #E4EEF3; --muted: #8AA3B1; --rule: #27404E;
  --veil: rgba(13, 27, 37, .86); --btn: #E4EEF3; --btn-ink: #0D1B25;
  --floor: #1E3240; --water: rgba(24, 104, 142, .58); --water-line: rgba(255,255,255,.07);
  --sand-top: #AE9A70; --sand-y: #8C7A56; --sand-x: #6C5E42;
  --bld-top: #DEDACF; --bld-y: #7E7C75; --bld-x: #4A4945; --win: #FFC46B;
  --scf: #5B676F; --scf-line: rgba(0, 0, 0, .35);
  --crn-top: #F2C55A; --crn-y: #B98C2A; --crn-x: #83621C; --crn-mark: #2A2418;
  --brc-top: #7E8B95; --brc-y: #55616A; --brc-x: #363F46; --brc-line: rgba(255,255,255,.2);
  --brk-top: #6F98B0; --brk-y: #4E7890; --brk-x: #35566A; --brk-line: rgba(255,255,255,.25);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-optical-sizing: auto;
  line-height: 1.45;
  min-height: 100vh;
}

.app {
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px 24px 40px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 36px;
  align-items: start;
}

h1 {
  font-size: 2.9rem;
  font-weight: 750;
  letter-spacing: -.03em;
  line-height: .95;
  margin: 0 0 .35rem;
}
.lede { margin: 0 0 1.3rem; color: var(--muted); font-size: 1.05rem; max-width: 26ch; }

.stats { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.stats > div { padding: .6rem 0 .5rem; border-bottom: 1px solid var(--rule); }
.stats > div:nth-child(odd) { padding-right: 1rem; }
.stats > div:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--rule); }
.stats dt { font-size: .85rem; color: var(--muted); margin: 0; }
.stats dd { margin: 0; font-size: 1.8rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }

.tide { margin: 1.1rem 0 0; }
.tide-bar { height: 10px; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.tide-bar i { display: block; height: 100%; width: 0; background: var(--water); border-radius: 999px; transition: width .35s ease; }
.tide p { margin: .45rem 0 0; font-size: .95rem; }

.palette { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 1.2rem 0 0; }
.blk {
  font: inherit; font-weight: 600; font-size: .92rem; color: var(--ink);
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .6rem; border: 1px solid var(--rule); border-radius: 8px;
  background: transparent; cursor: pointer; text-align: left;
}
.blk[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.blk:disabled { opacity: .4; cursor: not-allowed; }
.blk .sw { width: 14px; height: 14px; border-radius: 3px; flex: none; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.blk .n { margin-left: auto; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.desc { margin: .5rem 0 0; font-size: .9rem; color: var(--muted); min-height: 2.6em; }

.msg { margin: .8rem 0 0; min-height: 2.6em; font-size: .95rem; }

.actions { display: flex; gap: 6px; margin: .8rem 0 0; flex-wrap: wrap; }
button.ui {
  font: inherit; font-weight: 600; font-size: .92rem;
  padding: .5rem .8rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--rule); background: transparent; color: var(--ink);
}
button.ui.primary { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
button.ui:focus-visible, .blk:focus-visible, .slot:focus-visible, summary:focus-visible { outline: 3px solid var(--ok); outline-offset: 2px; }

details { margin-top: 1.2rem; border-top: 1px solid var(--rule); padding-top: .8rem; }
summary { cursor: pointer; font-weight: 600; }
details p { margin: .6rem 0 0; font-size: .93rem; color: var(--muted); max-width: 34ch; }
details p b { color: var(--ink); font-weight: 600; }

/* ---------- the board ---------- */
.scene {
  position: relative;
  height: clamp(400px, 70vh, 680px);
  perspective: 1600px;
  perspective-origin: 50% 35%;
}
.stage {
  position: absolute; left: 50%; top: 57%;
  width: calc(var(--n) * var(--s)); height: calc(var(--n) * var(--s));
  transform: translate(-50%, -50%) rotateX(58deg) rotateZ(var(--rot, 45deg));
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.3, .7, .2, 1);
}
.cells, .box { transform-style: preserve-3d; }
.cells { position: absolute; inset: 0; }

.floor, .water {
  position: absolute;
  left: calc(-2 * var(--s)); top: calc(-2 * var(--s));
  width: calc((var(--n) + 4) * var(--s)); height: calc((var(--n) + 4) * var(--s));
}
.floor { background: var(--floor); transform: translateZ(-1px); }
.water {
  pointer-events: none;
  background-color: var(--water);
  background-image: repeating-linear-gradient(45deg, var(--water-line) 0 8px, transparent 8px 30px);
  background-size: 120px 120px;
  transform: translateZ(calc((var(--w, 0) + .14) * var(--s)));
  transition: transform .9s cubic-bezier(.3, .7, .2, 1);
  animation: drift 7s linear infinite;
}
@keyframes drift { to { background-position: 120px 120px; } }

.box {
  position: absolute;
  left: calc(var(--x) * var(--s)); top: calc(var(--y) * var(--s));
  width: var(--s); height: var(--s);
  transform: translateZ(calc((var(--z) + var(--dz)) * var(--s)));
}
.box.drop { animation: drop .38s cubic-bezier(.2, .8, .25, 1); }
@keyframes drop { from { --dz: 3; } to { --dz: 0; } }

.f { position: absolute; backface-visibility: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); }
.f.top { inset: 0; transform: translateZ(calc(var(--h) * var(--s))); }
.f.py { left: 0; bottom: 0; width: var(--s); height: calc(var(--h) * var(--s)); transform-origin: 50% 100%; transform: rotateX(-90deg); }
.f.ny { left: 0; top: 0; width: var(--s); height: calc(var(--h) * var(--s)); transform-origin: 50% 0; transform: rotateX(90deg); }
.f.px { top: 0; right: 0; height: var(--s); width: calc(var(--h) * var(--s)); transform-origin: 100% 50%; transform: rotateY(90deg); }
.f.nx { top: 0; left: 0; height: var(--s); width: calc(var(--h) * var(--s)); transform-origin: 0 50%; transform: rotateY(-90deg); }

/* terrain and landfill */
.ter .top { background: var(--sand-top); }
.ter .py, .ter .ny { background: var(--sand-y); }
.ter .px, .ter .nx { background: var(--sand-x); }
.ter.fill .f { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 2px, transparent 2px 9px); }
.ter.fill .top { background-image: none; }

/* homes */
.bld .top { background: var(--bld-top); }
.bld .py, .bld .ny { background-color: var(--bld-y); }
.bld .px, .bld .nx { background-color: var(--bld-x); }
.bld .py, .bld .ny, .bld .px, .bld .nx {
  background-image:
    linear-gradient(var(--win), var(--win)), linear-gradient(var(--win), var(--win)),
    linear-gradient(var(--win), var(--win)), linear-gradient(var(--win), var(--win));
  background-size: 18% 18%;
  background-repeat: no-repeat;
  background-position: 24% 26%, 76% 26%, 24% 74%, 76% 74%;
}

/* scaffold */
.scf .f {
  background-color: var(--scf);
  background-image:
    repeating-linear-gradient(45deg, var(--scf-line) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(-45deg, var(--scf-line) 0 2px, transparent 2px 11px);
}
.scf .top { background-image: repeating-linear-gradient(0deg, var(--scf-line) 0 2px, transparent 2px 9px); }

/* crane: hazard stripes on the roof, a dark hoist line up each side */
.crn .top {
  background-color: var(--crn-top);
  background-image: repeating-linear-gradient(45deg, var(--crn-mark) 0 14%, transparent 14% 32%);
}
.crn .py, .crn .ny { background-color: var(--crn-y); }
.crn .px, .crn .nx { background-color: var(--crn-x); }
.crn .py, .crn .ny, .crn .px, .crn .nx {
  background-image: linear-gradient(var(--crn-mark), var(--crn-mark));
  background-size: 14% 70%;
  background-repeat: no-repeat;
  background-position: 50% 100%;
}

/* brace: riveted steel bands */
.brc .top { background-color: var(--brc-top); background-image: repeating-linear-gradient(90deg, var(--brc-line) 0 2px, transparent 2px 16%); }
.brc .py, .brc .ny { background-color: var(--brc-y); }
.brc .px, .brc .nx { background-color: var(--brc-x); }
.brc .py, .brc .ny, .brc .px, .brc .nx { background-image: repeating-linear-gradient(0deg, var(--brc-line) 0 2px, transparent 2px 25%); }

/* breakwater: wave-cut concrete */
.brk .top { background-color: var(--brk-top); }
.brk .py, .brk .ny { background-color: var(--brk-y); }
.brk .px, .brk .nx { background-color: var(--brk-x); }
.brk .f { background-image: repeating-linear-gradient(0deg, transparent 0 30%, var(--brk-line) 30% 38%, transparent 38% 100%); }

/* a crane or brace with something built on it no longer works */
.idle .f { background-image: none; filter: saturate(.55); }

.wet .f { background-image: none; filter: saturate(.4) brightness(.85); }

.slot {
  position: absolute; margin: 0; padding: 0; border: 0; background: transparent;
  left: calc(var(--x) * var(--s)); top: calc(var(--y) * var(--s));
  width: var(--s); height: var(--s);
  transform: translateZ(calc(var(--z) * var(--s) + 1px));
  cursor: not-allowed;
}
.slot.ok { cursor: pointer; box-shadow: inset 0 0 0 2px var(--ok); }
.slot.ok:hover { background: var(--ok-soft); }
.slot.no:hover { background: var(--bad); }

.overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--veil); text-align: center; padding: 24px;
}
.overlay[hidden] { display: none; }
.overlay h2 { font-size: 2.4rem; font-weight: 750; letter-spacing: -.03em; line-height: 1; margin: 0 0 .5rem; }
.overlay p { margin: 0 0 1.2rem; font-size: 1.05rem; max-width: 34ch; }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; gap: 20px; padding: 20px 16px 32px; }
  .scene { order: -1; height: clamp(300px, 52vh, 460px); }
  h1 { font-size: 2.3rem; }
  .lede { margin-bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .water, .stage, .tide-bar i { transition: none; }
  .water { animation: none; }
  .box.drop { animation: none; }
}