@font-face {
  font-family: 'IoskeleyMono';
  src: url('fonts/IoskeleyMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: block;
}

:root {
  --bg: #000000;
  --panel: #050506;
  --panel-2: #0b0b0d;
  --ink: #e9e9ec;
  --ink-dim: rgba(233, 233, 236, 0.52);
  --line: rgba(233, 233, 236, 0.18);
  --line-soft: rgba(233, 233, 236, 0.09);
  --bright: #ffffff;
  --mono: 'IoskeleyMono', ui-monospace, 'SF Mono', Menlo, monospace;
  --pad: 14px;
  --travel: 6px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 44px 44px;
  color: var(--ink);
  font: 13px/1.4 var(--mono);
}
button { font: inherit; color: inherit; }
::selection { background: var(--bright); color: var(--bg); }

.app { display: flex; flex-direction: column; height: 100%; padding: var(--pad); gap: 10px; }
.panel { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.label { font-size: 10px; letter-spacing: 0.18em; color: var(--ink-dim); }

.topbar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.topbar__brand { margin-right: auto; letter-spacing: 0.12em; color: var(--bright); }

.board { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-content: center; }

/* up: raised slab with a hard bottom edge; down: sinks onto the edge and inverts */
.pad {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  margin-bottom: var(--travel);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 var(--travel) 0 var(--panel-2), 0 var(--travel) 0 1px var(--line);
  letter-spacing: 0.18em;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 60ms, box-shadow 60ms, background 60ms, color 60ms;
}
.pad img { flex: 1; min-height: 0; width: 100%; object-fit: cover; border-radius: 4px; pointer-events: none; }
/* label: bubble pinned over the bottom-left of the image, inverts with the pad */
.pad span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 8px;
  background: inherit;
  border: 1px solid;
  border-color: inherit;
  border-radius: 4px;
}
.pad:hover { border-color: var(--ink-dim); color: var(--bright); }
.pad:focus-visible { outline: 1px dashed var(--bright); outline-offset: 4px; }
.pad.is-down {
  transform: translateY(var(--travel));
  box-shadow: 0 0 0 var(--panel-2), 0 0 0 1px var(--bright);
  background: var(--bright);
  border-color: var(--bright);
  color: var(--bg);
  transition: none;
}

/* mobile: 2 columns, split the remaining screen height between them */
@media (max-width: 700px) {
  .app { height: 100dvh; }
  .board { min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); align-content: stretch; }
  .pad { aspect-ratio: auto; min-height: 0; }
}