/* Not Hues and Cues: pieces shared by the TV and the phones (paint chips, cones, the
   wordmark) and the paint-shop table. Dark rules first, then the light theme. */
:root { --hc-font: "Avenir Next Condensed", "Roboto Condensed", "sans-serif-condensed", "Arial Narrow", "Helvetica Neue", Inter, Arial, sans-serif; }

/* a cone: the SVG draws its own white rim, so it reads on any square */
.hc-cone { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }

/* a paint chip: the colour, its coordinate, and on cards its shop name */
.hc-chip { position: relative; background: var(--sw); border-radius: 10px; color: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 3px 10px rgba(0,0,0,.18); display: flex; flex-direction: column; justify-content: flex-end; padding: 8px 10px; overflow: hidden; }
.hc-chip.ink-dark { color: #1c1b19; }
.hc-chip .hc-chipc { font-family: var(--hc-font); font-size: 22px; font-weight: 800; letter-spacing: .02em; line-height: 1; font-variant-numeric: tabular-nums; }
.hc-chip .hc-chipc b { font-weight: 900; margin-right: 1px; }
.hc-chip .hc-chipn { font-size: 12px; font-weight: 700; opacity: .86; margin-top: 3px; line-height: 1.15; }
.hc-chip.ink-light .hc-chipc, .hc-chip.ink-light .hc-chipn { text-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* the wordmark: each letter on its own paint chip */
.hc-mark { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; font-family: var(--hc-font); line-height: 1; }
.hc-mark .hc-not { font-family: var(--font, Inter, sans-serif); font-size: 13px; font-weight: 900; letter-spacing: .34em; color: var(--label-2); margin: 0 0 1px 2px; }
.hc-wline { display: flex; gap: 3px; align-items: center; }
.hc-wt { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 1.22em; height: 1.45em; border-radius: .16em; background: var(--sw); color: #fff; font-weight: 900; text-shadow: 0 1px 2px rgba(0,0,0,.3); box-shadow: inset 0 -.12em 0 rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.18); }
.hc-wt.ink-dark { color: #1f1d1a; text-shadow: none; }
.hc-wsp { width: .3em; }
.hc-wamp { font-style: normal; font-weight: 900; color: var(--text); width: .9em; text-align: center; font-size: .9em; }

/* The table: a paint-shop pegboard wall. Dark is the shop after hours. */
.tbl-paintshop {
  --tbl-edge: #121214; --tbl-rim: #3a3a40; --tbl-glow: rgba(255,240,210,.08);
  --hc-panel: #1f2024; --hc-panel-2: #2a2b30; --hc-ink: #f4f1ea; --hc-line: rgba(255,255,255,.08); --hc-gap: #17181b;
  background:
    radial-gradient(ellipse 60% 55% at 50% 40%, rgba(255,232,190,.07), transparent 70%),
    radial-gradient(circle at 14px 14px, rgba(0,0,0,.55) 0 3.2px, rgba(255,255,255,.035) 3.6px 4.6px, transparent 5px) 0 0 / 28px 28px,
    linear-gradient(180deg, #2b2c31 0%, #232428 100%);
}
[data-theme="light"] .tbl-paintshop {
  --tbl-edge: #fffdf8; --tbl-rim: #d8c9ac; --tbl-glow: rgba(255,255,255,.3);
  --hc-panel: #fffefb; --hc-panel-2: #f6f1e7; --hc-ink: #23211d; --hc-line: rgba(70,50,20,.1); --hc-gap: #fffefb;
  background:
    radial-gradient(ellipse 65% 60% at 50% 38%, rgba(255,255,255,.45), transparent 72%),
    radial-gradient(circle at 14px 14px, rgba(96,66,30,.34) 0 3.2px, rgba(255,255,255,.55) 3.6px 4.6px, transparent 5px) 0 0 / 28px 28px,
    linear-gradient(180deg, #ecdfc6 0%, #e3d3b5 100%);
}