@font-face { font-family: 'Big Shoulders'; src: url('/fonts/Big-Shoulders-var-normal-latin.woff2') format('woff2'); font-weight: 100 900; font-display: block; }
@font-face { font-family: 'Satoshi'; src: url('/fonts/Satoshi-var-normal.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
@property --shade { syntax: '<number>'; inherits: false; initial-value: 0; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg, #000); color: #eee; overflow: hidden; display: grid; place-items: center; font: 400 15px/1.5 Satoshi, system-ui, sans-serif; }
body.idle { cursor: none; }
body[data-background="dark"] { background: radial-gradient(120% 90% at 50% 20%, #1c1814, #070605 70%); }
body[data-background="solid"] { background: var(--bg, #000); }
#wall { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; display: block; }
body:not([data-background="wall"]) #wall { display: none; }

.board { --cell-w: 30px; --gap: 3px; --shape: 1.5; --letter: 1; --cell-h: calc(var(--cell-w) * var(--shape)); --flap: #1d1c1a; --ink: #f1ebdf; position: relative; }

/* ── The case ─────────────────────────────────────────────────────────────── */
.case {
  position: relative;
  padding: calc(var(--cell-w) * .9) calc(var(--cell-w) * 1.1);
  border-radius: calc(var(--cell-w) * .28);
  background-color: #0e0d0c;
  background-image:
    linear-gradient(180deg, rgba(255, 240, 220, .07), transparent 12%, transparent 85%, rgba(0, 0, 0, .35)),
    url('/tex/grain.png');
  background-blend-mode: normal, overlay;
  background-size: auto, 180px;
  box-shadow:
    0 1px 0 rgba(255, 235, 200, .14) inset,
    0 -2px 0 rgba(0, 0, 0, .7) inset,
    0 0 0 1px #000,
    0 calc(var(--cell-w) * 1.4) calc(var(--cell-w) * 2.6) calc(var(--cell-w) * -.6) rgba(0, 0, 0, .85),
    0 calc(var(--cell-w) * .3) calc(var(--cell-w) * .6) rgba(0, 0, 0, .5);
}
.case::before { /* an inner bezel the flaps sit behind */
  content: ""; position: absolute; inset: calc(var(--cell-w) * .45); border-radius: calc(var(--cell-w) * .14);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 240, 220, .06);
  background: #070706; pointer-events: none;
}
.board[data-frame="aluminium"] .case {
  background-color: #8e9194;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, .12) 70%, rgba(0, 0, 0, .3)),
    url('/tex/brushed.png');
  background-blend-mode: normal, multiply;
  background-size: auto, 420px 140px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -2px 0 rgba(0, 0, 0, .35) inset, 0 0 0 1px #3c3f42,
    0 calc(var(--cell-w) * 1.4) calc(var(--cell-w) * 2.6) calc(var(--cell-w) * -.6) rgba(0, 0, 0, .8);
}
.board[data-frame="walnut"] .case {
  background-color: #3a2317;
  background-image: linear-gradient(180deg, rgba(255, 220, 180, .10), transparent 20%, rgba(0, 0, 0, .35)), url('/tex/walnut.jpg');
  background-blend-mode: normal, normal;
  background-size: auto, calc(var(--cell-w) * 16);
  box-shadow: 0 1px 0 rgba(255, 220, 180, .25) inset, 0 -2px 0 rgba(0, 0, 0, .6) inset, 0 0 0 1px #150b06,
    0 calc(var(--cell-w) * 1.4) calc(var(--cell-w) * 2.6) calc(var(--cell-w) * -.6) rgba(0, 0, 0, .85);
}
.screw {
  position: absolute; width: clamp(8px, calc(var(--cell-w) * .3), 16px); height: clamp(8px, calc(var(--cell-w) * .3), 16px); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d8d2c6, #6d6a64 45%, #26241f 75%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.screw::after { content: ""; position: absolute; left: 18%; right: 18%; top: 46%; height: 9%; background: rgba(20, 18, 15, .85); transform: rotate(var(--r, 35deg)); }
.screw.tl { left: clamp(6px, calc(var(--cell-w) * .2), 14px); top: clamp(6px, calc(var(--cell-w) * .2), 14px); --r: 20deg; }
.screw.tr { right: clamp(6px, calc(var(--cell-w) * .2), 14px); top: clamp(6px, calc(var(--cell-w) * .2), 14px); --r: 75deg; }
.screw.bl { left: clamp(6px, calc(var(--cell-w) * .2), 14px); bottom: clamp(6px, calc(var(--cell-w) * .2), 14px); --r: -40deg; }
.screw.br { right: clamp(6px, calc(var(--cell-w) * .2), 14px); bottom: clamp(6px, calc(var(--cell-w) * .2), 14px); --r: 110deg; }
.plate { /* an engraved brass plate under the flaps */
  position: relative; margin: calc(var(--cell-w) * .7) auto calc(var(--cell-w) * -.25); width: max-content; max-width: 70%;
  padding: calc(var(--cell-w) * .12) calc(var(--cell-w) * .7);
  font: 700 calc(var(--cell-w) * .38)/1.3 Satoshi, sans-serif; letter-spacing: .32em; text-transform: uppercase;
  color: rgba(40, 26, 8, .85); text-shadow: 0 1px 0 rgba(255, 240, 200, .45);
  background: linear-gradient(180deg, #d6b36d, #a9803d 55%, #8a642a); border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 245, 210, .6), 0 1px 2px rgba(0, 0, 0, .7);
}

/* ── The grid ─────────────────────────────────────────────────────────────── */
.grid { position: relative; display: grid; gap: calc(var(--gap) * 1.4) var(--gap); }

.flap {
  --card: var(--flap);
  position: relative; width: var(--cell-w); height: var(--cell-h);
  perspective: calc(var(--cell-h) * 2.4);
  /* The letter is sized by whichever is tighter, the card's height or its width, so a wide M never spills over the edge. */
  font: 700 min(calc(var(--cell-h) * .73), calc(var(--cell-w) * 1.12)) / var(--cell-h) 'Big Shoulders', sans-serif;
  font-size: min(calc(var(--cell-h) * .73 * var(--letter)), calc(var(--cell-w) * 1.2));
  text-align: center; text-transform: uppercase;
  transform: translate(var(--dx), var(--dy));
  filter: brightness(var(--tone));
}
.flap .h {
  position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; backface-visibility: hidden;
  background-color: var(--card);
  /* the card's own surface: painted, a little worn */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .06)), url('/tex/grain.png');
  background-blend-mode: normal, overlay;
  background-size: auto, 140px;
  background-position: 0 0, var(--grain-x) var(--grain-y);
}
.flap .h.colour { --card: inherit; }
.flap .h > span {
  position: absolute; left: 0; right: 0; height: var(--cell-h); line-height: var(--cell-h);
  /* printed ink: the grain shows through, and the edge is never razor sharp */
  color: var(--ink);
  text-shadow: 0 0 .5px color-mix(in srgb, var(--ink) 60%, transparent), 0 1px 0 rgba(0, 0, 0, .55);
  mask: url('/tex/ink.png') var(--grain-y) var(--grain-x) / 48px;
  mask-mode: luminance;
}
.flap .t { top: 0; border-radius: 3px 3px 1px 1px; box-shadow: inset 0 1px 0 rgba(255, 240, 220, .09), inset 0 -1px 0 rgba(0, 0, 0, .55); }
.flap .t > span { top: 0; }
.flap .b { bottom: 0; border-radius: 1px 1px 3px 3px; box-shadow: inset 0 1px 0 rgba(0, 0, 0, .7), inset 0 -2px 3px rgba(0, 0, 0, .35); }
.flap .b > span { bottom: 0; }
/* the lower card sits a touch deeper in shadow than the upper */
.flap .b:not(.leaf .b) { filter: brightness(.9); }
.flap .leaf { position: absolute; left: 0; right: 0; top: 0; height: 50%; z-index: 3; transform-origin: 50% 100%; transform-style: preserve-3d; }
.flap .leaf .h { height: 100%; }
.flap .leaf .h.back { transform: rotateX(180deg); }
.flap .cast {
  position: absolute; left: 0; right: 0; bottom: 0; height: 50%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .15)); opacity: 0; border-radius: 0 0 3px 3px;
}
.flap .pin { position: absolute; top: calc(50% - 2px); width: 3px; height: 4px; background: #050505; z-index: 4; border-radius: 1px; }
.flap .pin.l { left: -2px; } .flap .pin.r { right: -2px; }
.flap::after { /* the hinge: a thin dark gap across the middle */
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1.5px; background: rgba(0, 0, 0, .85); z-index: 2; pointer-events: none;
}

/* A soft sheet of light across the whole face, brighter near the top, as from a lamp above. */
.grid::after {
  content: ""; position: absolute; inset: -4px; pointer-events: none; z-index: 5;
  background: radial-gradient(90% 70% at 50% -10%, rgba(255, 225, 180, .10), transparent 60%),
              linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .18));
  mix-blend-mode: screen;
}

/* A small, quiet corner toolbar (hidden in TV mode, and while idle). */
.tools { position: fixed; right: 14px; bottom: 14px; display: flex; gap: 6px; opacity: 0; transition: opacity .4s; }
body:not(.idle) .tools { opacity: .9; }
.tools button { font: 600 12px/1 Satoshi, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 9px 12px; border-radius: 999px; border: 0; background: rgba(14, 12, 10, .7); color: #efe8dc; cursor: pointer; backdrop-filter: blur(6px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
body.tv .tools { display: none; }

@media (prefers-reduced-motion: reduce) { .flap .leaf { display: none; } }

/* Light cards (ivory, gallery white): the letters are dark, so their shadow is a light lift, not a dark drop. */
.board[data-light="true"] .flap .h > span { text-shadow: 0 0 .4px color-mix(in srgb, var(--ink) 50%, transparent), 0 1px 0 rgba(255, 255, 255, .35); }
.board[data-light="true"] .flap .h { background-image: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(0, 0, 0, .07)), url('/tex/grain.png'); }
.board[data-light="true"] .flap .b:not(.leaf .b) { filter: brightness(.94); }
.board[data-light="true"] .flap::after { background: rgba(0, 0, 0, .55); }
/* Modern letters. */
.board[data-font="grotesk"] .flap { font: 700 1em/var(--cell-h) Satoshi, system-ui, sans-serif; font-size: min(calc(var(--cell-h) * .6 * var(--letter)), calc(var(--cell-w) * .86)); }

/* Bare full screen: only the cards, edge to edge, on black (or the chosen colour). */
.board[data-frame="none"] .case { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.board[data-frame="none"] .case::before, .board[data-frame="none"] .screw, .board[data-frame="none"] .plate { display: none; }
.board[data-frame="none"] .grid::after { display: none; }
body[data-frame="none"] { background: var(--bg, #000) !important; }
body[data-frame="none"] #wall { display: none !important; }

/* Polished brass: a warm gold frame, a dark inner field. */
.board[data-frame="brass"] .case {
  background-color: #a8803f;
  background-image: linear-gradient(180deg, rgba(255, 244, 205, .55), rgba(255, 230, 170, .1) 22%, rgba(90, 60, 20, .25) 70%, rgba(40, 25, 5, .5)),
    linear-gradient(90deg, rgba(255, 255, 255, .0), rgba(255, 250, 220, .25) 30%, rgba(255, 255, 255, 0) 55%, rgba(255, 245, 210, .18) 80%, rgba(0,0,0,0)),
    url('/tex/brushed.png');
  background-blend-mode: normal, screen, multiply;
  background-size: auto, auto, 520px 120px;
  box-shadow: 0 1px 0 rgba(255, 248, 220, .8) inset, 0 -2px 0 rgba(60, 38, 8, .6) inset, 0 0 0 1px #4a3310,
    0 calc(var(--cell-w) * 1.4) calc(var(--cell-w) * 2.6) calc(var(--cell-w) * -.6) rgba(0, 0, 0, .85);
}
.board[data-frame="brass"] .screw { background: radial-gradient(circle at 35% 30%, #fff3cf, #b38a42 45%, #5b3f14 78%); }
/* Slim: a thin modern bezel, no screws, no plate. */
.board[data-frame="slim"] .case { padding: calc(var(--cell-w) * .4); border-radius: calc(var(--cell-w) * .12); background: #0a0a0a; background-image: none;
  box-shadow: 0 0 0 1px #000, 0 1px 0 rgba(255, 255, 255, .08) inset, 0 calc(var(--cell-w) * 1.2) calc(var(--cell-w) * 2.4) calc(var(--cell-w) * -.6) rgba(0, 0, 0, .8); }
.board[data-frame="slim"] .case::before { inset: calc(var(--cell-w) * .18); border-radius: calc(var(--cell-w) * .06); }
.board[data-frame="slim"] .screw, .board[data-frame="slim"] .plate { display: none; }
/* White powder-coat, for bright rooms. */
.board[data-frame="white"] .case {
  background-color: #eeebe4;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 25%, rgba(0, 0, 0, .06) 75%, rgba(0, 0, 0, .14)), url('/tex/grain.png');
  background-blend-mode: normal, soft-light;
  background-size: auto, 160px;
  box-shadow: 0 1px 0 #fff inset, 0 -2px 0 rgba(0, 0, 0, .12) inset, 0 0 0 1px #c9c4b9,
    0 calc(var(--cell-w) * 1.4) calc(var(--cell-w) * 2.6) calc(var(--cell-w) * -.6) rgba(0, 0, 0, .55);
}
.board[data-frame="white"] .screw { background: radial-gradient(circle at 35% 30%, #ffffff, #bdb8ae 50%, #6f6a61 80%); }

/* ── The options gear, as on the Diamond and Sable sites ─────────────────── */
.tune { position: fixed; z-index: 30; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
body.tv .tune { display: none; }
.tune-gear { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(20, 18, 19, .72); color: #f3ece4;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: .6; transition: opacity .2s, transform .3s; }
body.idle:not(.settings-open) .tune-gear { opacity: 0; }
.tune-gear:hover, .tune-gear[aria-expanded="true"] { opacity: 1; }
.tune-gear[aria-expanded="true"] { transform: rotate(60deg); }
.tune-gear svg { width: 20px; height: 20px; }
.look-switch[hidden] { display: none; }
.look-switch {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 18px;
  max-height: calc(100dvh - 90px); overflow: auto;
  background: rgba(20, 18, 19, .78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 50px rgba(0, 0, 0, .45);
  font: 500 13px/1.2 Satoshi, system-ui, sans-serif;
}
.look-switch .row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.look-switch .row b { color: #a9a39b; font: 600 .62rem/1 Satoshi, sans-serif; letter-spacing: .16em; text-transform: uppercase; width: 58px; flex: none; }
.look-switch button { font: inherit; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px; color: #f3ece4; font-size: .78rem; letter-spacing: .04em; white-space: nowrap; }
.look-switch button:hover { background: rgba(243, 236, 228, .1); }
.look-switch button[aria-pressed="true"] { background: #f3ece4; color: #141213; }
.look-switch .sw { width: 14px; height: 14px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(0, 0, 0, .3);
  font: 800 9px/14px 'Big Shoulders', sans-serif; text-align: center; font-style: normal; }
.look-switch .sw.none { background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(255, 255, 255, .35) 3px 4px) !important; }
.look-switch button[aria-pressed="true"] .sw { box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.look-switch .row.keep { padding-top: 6px; margin-top: 2px; border-top: 1px solid rgba(255, 255, 255, .08); }
.look-switch .keep-btn { background: #f0a33a; color: #1a1208; font-weight: 700; }
.look-switch .keep-btn:hover { background: #f5b556; }
.look-switch .reset-btn { color: #a9a39b; }
.look-switch .row.keep span { color: #cfc4b3; font-size: .74rem; padding-left: 4px; max-width: 32ch; }
@media (max-width: 640px) { .look-switch button { padding: 7px 9px; font-size: .7rem; } .look-switch .row b { display: none; } }

/* The words editor inside the options panel. */
.look-switch .words { display: grid; gap: 10px; padding: 6px 2px 4px; width: min(520px, calc(100vw - 60px)); }
.word-card { background: rgba(255, 255, 255, .05); border-radius: 12px; padding: 10px; display: grid; gap: 8px; }
.word-head { display: flex; align-items: center; gap: 4px; }
.word-head span { flex: 1; color: #a9a39b; font: 600 .62rem/1 Satoshi, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.look-switch .word-head button, .look-switch .word-tools button, .look-switch .word-opts button { padding: 6px 10px; font-size: .72rem; background: rgba(255, 255, 255, .06); }
.look-switch .word-head button:disabled { opacity: .35; cursor: default; }
.word-card textarea { width: 100%; resize: vertical; font: 700 15px/1.45 'Big Shoulders', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: #f3ece4; background: #0d0c0b; border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; padding: 8px 10px; }
.word-card textarea:focus { outline: 2px solid #f0a33a; outline-offset: 1px; }
.word-tools, .word-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.look-switch .word-tools .dot { padding: 6px 8px; }
.look-switch .add-screen { justify-self: start; background: rgba(240, 163, 58, .18); color: #f5c47f; }
.word-help { margin: 0; color: #9d9384; font-size: .72rem; line-height: 1.45; }
.look-switch .word-opts button[aria-pressed="true"] { background: #f3ece4; color: #141213; }