/* ============================================================
   LARX ARCADE — site shell
   The games are loud and each has its own palette. The shell is
   deliberately quiet: near-black, warm off-white, one brass accent.
   Each game brings its own --accent and --tint into the card and
   the play screen, so the site frames the games instead of fighting
   them.
   ============================================================ */

:root{
  /* ground */
  --ink:        #07080b;
  --ink-raised: #0e1015;
  --ink-panel:  #14171e;
  --hairline:   #232833;
  --hairline-lit:#39414f;

  /* type */
  --chalk:      #f2efe9;   /* warm off-white — echoes Wordle paper + Track-Man chalk */
  --chalk-dim:  #9aa1ad;
  --chalk-faint:#616977;

  /* house accent — brass. Already the common thread across four
     of the five games (Tetris #ffd23f, 2048 #f5a623,
     Track-Man #ffb42c, Music Desk #C9A227). */
  --brass:      #e0a92e;
  --brass-lit:  #ffc85a;

  /* per-card overrides; these are the neutral fallbacks */
  --accent:     var(--brass);
  --tint:       var(--ink-panel);

  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --sans:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --pad:     clamp(20px, 4vw, 56px);
  --measure: 1240px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--chalk);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--brass-lit);outline-offset:3px;border-radius:2px}

/* A single sheet of film grain over everything. Cheap, and it stops
   the large flat blacks from banding on wide gamut displays. */
.grain{
  position:fixed;inset:0;z-index:99;pointer-events:none;
  opacity:.28;mix-blend-mode:overlay;
}

.shell{max-width:var(--measure);margin:0 auto;padding:0 var(--pad)}

/* ---------- tracked-out mono label, used everywhere ---------- */
.label{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--chalk-faint);
}

/* ---------- start-line rule (borrowed from Track-Man) ---------- */
.startline{
  height:7px;
  background:repeating-linear-gradient(90deg,currentColor 0 8px,transparent 8px 16px);
  opacity:.3;
  color:var(--chalk);
}

/* ============================================================
   HEADER
   ============================================================ */
.masthead{
  position:sticky;top:0;z-index:40;
  backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(7,8,11,.92), rgba(7,8,11,.72));
  border-bottom:1px solid var(--hairline);
}
.masthead .shell{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:64px;
}
.wordmark{display:flex;align-items:baseline;gap:9px;line-height:1}
.wordmark .l{
  font-family:var(--display);
  font-weight:600;
  font-size:23px;
  letter-spacing:.01em;
}
.wordmark .l b{color:var(--brass);font-weight:600}
.wordmark .a{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--chalk-faint);
  padding-bottom:2px;
}
.masthead nav{display:flex;align-items:center;gap:clamp(14px,3vw,30px)}
.masthead nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chalk-dim);
  transition:color .18s;
}
.masthead nav a:hover{color:var(--chalk)}
.masthead nav a.cta{
  color:var(--ink);background:var(--brass);
  padding:8px 16px;border-radius:2px;font-weight:600;
  transition:background .18s;
}
.masthead nav a.cta:hover{background:var(--brass-lit);color:var(--ink)}

/* ============================================================
   HERO / MARQUEE
   ============================================================ */
.marquee{
  position:relative;
  padding:clamp(56px,11vw,132px) 0 clamp(40px,6vw,72px);
  overflow:hidden;
}
/* the bloom behind the wordmark — an arcade cabinet's marquee light */
.marquee::before{
  content:"";position:absolute;left:50%;top:-24%;
  width:min(1100px,150vw);aspect-ratio:1.6;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(224,169,46,.16) 0%, rgba(224,169,46,.05) 40%, transparent 70%);
  pointer-events:none;
}
.marquee .shell{position:relative}

.marquee h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(58px,15vw,178px);
  line-height:.86;
  letter-spacing:-.015em;
  margin:0;
}
.marquee h1 em{
  font-style:italic;
  color:var(--brass);
}
.marquee .sub{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;
  margin-top:clamp(18px,3vw,30px);
}
.marquee .sub .a{
  font-family:var(--mono);font-size:clamp(11px,1.5vw,14px);
  letter-spacing:.44em;text-transform:uppercase;color:var(--chalk);
}
.marquee .sub .dot{color:var(--chalk-faint)}
.marquee .lede{
  max-width:46ch;margin:22px 0 0;
  font-size:clamp(15px,1.7vw,18.5px);
  line-height:1.65;
  color:var(--chalk-dim);
}
.marquee .lede strong{color:var(--chalk);font-weight:500}

.marquee .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;
  padding:14px 24px;border-radius:2px;
  border:1px solid var(--hairline-lit);
  color:var(--chalk);background:transparent;
  cursor:pointer;
  transition:border-color .18s, background .18s, color .18s, transform .1s;
}
.btn:hover{border-color:var(--brass);color:var(--brass-lit)}
.btn:active{transform:translateY(1px)}
.btn.solid{background:var(--brass);border-color:var(--brass);color:#1a1305;font-weight:600}
.btn.solid:hover{background:var(--brass-lit);border-color:var(--brass-lit);color:#1a1305}

/* the attract-mode ticker under the hero */
.ticker{
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  overflow:hidden;
  padding:11px 0;
  background:var(--ink-raised);
}
.ticker .run{
  display:flex;gap:44px;white-space:nowrap;width:max-content;
  animation:slide 46s linear infinite;
}
.ticker span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--chalk-faint);
}
.ticker span b{color:var(--brass);font-weight:400}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   CABINET GRID
   ============================================================ */
/* padding-block only — a shorthand here would wipe .shell's gutters */
.section{padding-block:clamp(52px,8vw,96px);scroll-margin-top:80px}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:clamp(24px,4vw,40px);
}
.section-head h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(28px,4.6vw,46px);line-height:1.05;margin:0;
}
.section-head p{margin:8px 0 0;color:var(--chalk-dim);font-size:15px;max-width:44ch}

.grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(14px,2vw,22px);
}

/* ---------- the cabinet card ---------- */
.cab{
  position:relative;
  grid-column:span 2;
  display:flex;flex-direction:column;
  min-height:290px;
  padding:20px;
  border:1px solid var(--hairline);
  border-radius:3px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%),
    var(--tint);
  overflow:hidden;
  isolation:isolate;
  transition:border-color .22s, transform .22s cubic-bezier(.2,.8,.3,1);
}
.cab.wide{grid-column:span 3}
.cab.feature{grid-column:span 4;min-height:380px}

/* the accent bar along the top edge — off, then lit on hover */
.cab::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .34s cubic-bezier(.2,.8,.3,1);
}
/* accent bloom from the lower right, like a screen glow */
.cab::after{
  content:"";position:absolute;right:-18%;bottom:-28%;
  width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, var(--accent), transparent 70%);
  opacity:.09;filter:blur(4px);pointer-events:none;z-index:-1;
  transition:opacity .3s;
}
.cab:hover,.cab:focus-within{
  border-color:var(--hairline-lit);
  transform:translateY(-3px);
}
.cab:hover::before,.cab:focus-within::before{transform:scaleX(1)}
.cab:hover::after,.cab:focus-within::after{opacity:.2}

/* light cards (Wordle) flip their text colours */
.cab.light{
  --card-ink:#1a1612;
  --card-dim:#6b6358;
  border-color:#cfc7b8;
  background:linear-gradient(180deg, rgba(255,255,255,.5), transparent 45%), var(--tint);
}
.cab{--card-ink:var(--chalk);--card-dim:var(--chalk-dim)}
.cab.light:hover{border-color:#a89e8c}

.cab .art{
  flex:1;
  display:flex;align-items:center;justify-content:center;
  padding:8px 0 18px;
  min-height:110px;
}
.cab .art svg{
  width:100%;height:100%;max-height:190px;
  overflow:visible;
}
.cab.feature .art svg{max-height:250px}

.cab .meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cab h3{
  font-family:var(--display);font-weight:400;
  font-size:clamp(21px,2.5vw,27px);line-height:1.1;margin:0;
  color:var(--card-ink);
}
.cab.feature h3{font-size:clamp(26px,3.6vw,38px)}
.cab .kind{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);
  white-space:nowrap;
}
.cab.light .kind{color:#2a6640}
.cab .blurb{
  margin:9px 0 0;font-size:13.5px;line-height:1.55;
  color:var(--card-dim);
  max-width:38ch;
}
.cab .foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.cab.light .foot{border-top-color:rgba(26,22,18,.14)}
.cab .ctrl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--card-dim)}
.cab .go{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--card-ink);
  display:inline-flex;align-items:center;gap:7px;
}
.cab .go i{
  font-style:normal;color:var(--accent);
  transition:transform .22s cubic-bezier(.2,.8,.3,1);
  display:inline-block;
}
.cab:hover .go i{transform:translateX(4px)}
.cab.light .go i{color:#2a6640}

/* whole card is the link */
.cab .stretch{position:absolute;inset:0;z-index:3}

/* "resume" pip for the last game played, set by JS */
.cab .pip{
  position:absolute;top:14px;right:16px;z-index:2;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);
  display:none;align-items:center;gap:6px;
}
.cab[data-recent] .pip{display:flex}
.cab .pip::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px var(--accent);
}

/* ============================================================
   STRIP — "what makes it good" row
   ============================================================ */
.notes{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,3vw,40px);
  border-top:1px solid var(--hairline);
  padding-top:clamp(28px,4vw,44px);
}
.notes .n h4{
  font-family:var(--display);font-weight:400;font-size:20px;
  margin:12px 0 6px;
}
.notes .n p{margin:0;color:var(--chalk-dim);font-size:14px;line-height:1.6}

/* ============================================================
   FOOTER
   ============================================================ */
footer.site{
  border-top:1px solid var(--hairline);
  padding:36px 0 48px;
  margin-top:clamp(40px,7vw,80px);
}
footer.site .shell{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:16px;
}
footer.site .label{color:var(--chalk-faint)}

/* ============================================================
   PLAY SCREEN — the cabinet the games sit inside
   ============================================================ */
body.play{
  height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--ink);
}
.playbar{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  height:52px;padding:0 clamp(12px,2.4vw,20px);
  border-bottom:1px solid var(--hairline);
  background:var(--ink-raised);
}
.playbar .left,.playbar .right{display:flex;align-items:center;gap:clamp(8px,1.6vw,16px);min-width:0}
.playbar .back{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chalk-dim);
  transition:color .18s;
}
.playbar .back:hover{color:var(--chalk)}
.playbar .div{width:1px;height:20px;background:var(--hairline)}
.playbar .now{display:flex;align-items:baseline;gap:10px;min-width:0}
.playbar .now h1{
  font-family:var(--display);font-weight:400;font-size:17px;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.playbar .now .kind{
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap;
}
.playbar .hint{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chalk-faint);
  white-space:nowrap;
}
.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:2px;
  border:1px solid var(--hairline);background:transparent;
  color:var(--chalk-dim);cursor:pointer;
  transition:border-color .18s,color .18s;
}
.iconbtn:hover{border-color:var(--accent);color:var(--accent)}
.iconbtn svg{width:15px;height:15px}

/* Portrait games (Wordle, 2048) are built for a phone. Stretched across a
   desktop they float in an ocean of their own background, so the shell
   holds them to a sane width and paints the surround itself — which is
   what an actual cabinet bezel does. --fw is set per game. */
.screen{
  flex:1 1 auto;min-height:0;position:relative;
  display:flex;align-items:stretch;justify-content:center;
  background:var(--ink);
}
.screen iframe{
  width:min(100%, var(--fw, 100%));
  height:100%;border:0;display:block;
}
.screen.inset{align-items:center;padding:clamp(0px,1.4vh,18px) 0}
.screen.inset iframe{
  height:min(100%, var(--fh, 100%));
  border:1px solid var(--hairline);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 24px 60px -30px #000;
}
/* a thin accent line under the bar so the game reads as "inside" something */
.screen::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.5;pointer-events:none;
}

/* game switcher tray */
.tray{
  flex:0 0 auto;
  display:flex;align-items:center;gap:8px;
  padding:9px clamp(12px,2.4vw,20px);
  border-top:1px solid var(--hairline);
  background:var(--ink-raised);
  overflow-x:auto;scrollbar-width:none;
}
.tray::-webkit-scrollbar{display:none}
.tray .label{flex:0 0 auto;margin-right:6px}
.tray a{
  flex:0 0 auto;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chalk-dim);
  padding:6px 12px;border:1px solid var(--hairline);border-radius:2px;
  transition:border-color .18s,color .18s;
  white-space:nowrap;
}
.tray a:hover{color:var(--chalk);border-color:var(--hairline-lit)}
.tray a[aria-current="page"]{color:var(--accent);border-color:var(--accent)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .grid{grid-template-columns:repeat(4,1fr)}
  .cab,.cab.wide{grid-column:span 2}
  .cab.feature{grid-column:span 4;min-height:320px}
  .notes{grid-template-columns:1fr}
}
@media (max-width:620px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .cab,.cab.wide,.cab.feature{grid-column:span 2;min-height:250px}
  .masthead nav a:not(.cta){display:none}
  .playbar .hint{display:none}
  .section-head{display:block;position:relative}
  .section-head > div.label{display:none}
  .section-head > a.label{display:inline-block;margin-top:14px}
  .marquee .lede{font-size:15.5px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .ticker .run{animation:none}
}

/* ============================================================
   FIND — masthead button, library search, tag chips
   ============================================================ */
.findbtn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--chalk-dim);
  background:transparent;border:1px solid var(--hairline);
  border-radius:2px;padding:7px 11px;cursor:pointer;
  transition:border-color .18s,color .18s;
}
.findbtn:hover{border-color:var(--hairline-lit);color:var(--chalk)}
.findbtn svg{width:13px;height:13px;flex:none}
kbd{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;
  color:var(--chalk-faint);border:1px solid var(--hairline);
  border-radius:2px;padding:2px 5px;line-height:1;
  text-transform:none;
}
kbd.key{padding:1px 6px;color:var(--brass);border-color:rgba(224,169,46,.4)}
.linky{transition:color .18s}
a.linky:hover{color:var(--brass)}

.filters{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-bottom:clamp(20px,3vw,30px);
}
.searchbar{
  display:flex;align-items:center;gap:10px;
  flex:1 1 260px;min-width:0;
  border:1px solid var(--hairline);border-radius:2px;
  background:var(--ink-raised);
  padding:0 12px;height:44px;
  transition:border-color .18s;
}
.searchbar:focus-within{border-color:var(--brass)}
.searchbar svg{width:15px;height:15px;color:var(--chalk-faint);flex:none}
.searchbar input{
  flex:1;min-width:0;height:100%;
  background:transparent;border:0;outline:0;
  color:var(--chalk);font-family:var(--sans);font-size:15px;
}
.searchbar input::placeholder{color:var(--chalk-faint)}
.searchbar input::-webkit-search-cancel-button{display:none}
.clearq{
  background:transparent;border:0;cursor:pointer;
  color:var(--chalk-faint);font-size:20px;line-height:1;padding:0 2px;
}
.clearq:hover{color:var(--chalk)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chalk-dim);
  background:transparent;border:1px solid var(--hairline);
  border-radius:2px;padding:8px 12px;cursor:pointer;
  transition:border-color .16s,color .16s,background .16s;
}
.chip:hover{color:var(--chalk);border-color:var(--hairline-lit)}
.chip[aria-pressed="true"]{
  color:var(--ink);background:var(--brass);border-color:var(--brass);font-weight:500;
}

.empty{color:var(--chalk-dim);font-size:15px;padding:40px 0;text-align:center}
.linkbtn{
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--brass);font:inherit;text-decoration:underline;text-underline-offset:3px;
}
.plainlist{margin:20px 0 0;padding-left:18px;color:var(--chalk-dim);line-height:2}
.plainlist a{color:var(--chalk);text-decoration:underline;text-underline-offset:3px}

/* "New" flag on a card */
.cab .flag{
  position:absolute;top:14px;left:16px;z-index:2;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);background:var(--accent);
  padding:3px 7px;border-radius:2px;font-weight:600;
}

/* ============================================================
   MINI LIST — the compact index of everything not featured
   ============================================================ */
.minilist{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:0 clamp(18px,3vw,40px);
}
.mini{
  display:flex;align-items:center;gap:12px;
  padding:15px 4px;
  border-top:1px solid var(--hairline);
  transition:padding-left .2s cubic-bezier(.2,.8,.3,1);
}
.mini:hover{padding-left:10px}
.mini .swatch{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--accent);box-shadow:0 0 10px -1px var(--accent);
}
.mini .t{font-family:var(--display);font-size:19px}
.mini .k{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chalk-faint);
}
.mini .n{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent);border-radius:2px;padding:1px 5px;
}
.mini .go{margin-left:auto;color:var(--chalk-faint);transition:color .18s,transform .2s}
.mini:hover .go{color:var(--accent);transform:translateX(3px)}

/* ============================================================
   COMMAND PALETTE
   ============================================================ */
body.palette-open{overflow:hidden}
.palette{position:fixed;inset:0;z-index:200;display:flex;justify-content:center}
.palette[hidden]{display:none}
.palette-scrim{position:absolute;inset:0;background:rgba(4,5,7,.72);backdrop-filter:blur(6px)}
.palette-box{
  position:relative;z-index:1;
  width:min(600px,calc(100% - 28px));
  margin-top:min(14vh,120px);
  align-self:flex-start;
  background:var(--ink-panel);
  border:1px solid var(--hairline-lit);
  border-radius:4px;
  box-shadow:0 40px 90px -30px #000;
  overflow:hidden;
  display:flex;flex-direction:column;
  max-height:min(70vh,560px);
}
.palette-field{
  display:flex;align-items:center;gap:12px;
  padding:0 16px;height:56px;flex:none;
  border-bottom:1px solid var(--hairline);
}
.palette-field svg{width:16px;height:16px;color:var(--chalk-faint);flex:none}
.palette-field input{
  flex:1;min-width:0;background:transparent;border:0;outline:0;
  color:var(--chalk);font-family:var(--sans);font-size:16px;
}
.palette-field input::placeholder{color:var(--chalk-faint)}

.palette-list{overflow-y:auto;padding:6px;flex:1 1 auto;min-height:0}
.palette-row{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:3px;
  transition:background .12s;
}
.palette-row .swatch{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--accent);box-shadow:0 0 10px -1px var(--accent);
}
.palette-row .t{font-size:15px;color:var(--chalk)}
.palette-row .k{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chalk-faint);margin-left:auto;
}
.palette-row .n{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent);border-radius:2px;padding:1px 5px;
}
.palette-row.on{background:rgba(255,255,255,.06)}
.palette-row.on .k{color:var(--chalk-dim)}
.palette-empty{padding:26px 14px;color:var(--chalk-faint);font-size:14px;text-align:center}

.palette-foot{
  display:flex;align-items:center;gap:16px;flex:none;
  padding:9px 16px;border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chalk-faint);
}
.palette-foot kbd{margin-right:3px}
.palette-foot .count{margin-left:auto}

@media (max-width:620px){
  .minilist{grid-template-columns:1fr}
  .findbtn span,.findbtn kbd{display:none}
  .findbtn{padding:8px}
  .palette-box{margin-top:6vh;max-height:82vh}
  .palette-foot span:not(.count){display:none}
}

/* tray: the "all games" link reads as the end of the shortlist */
.tray a.trayall{color:var(--brass);border-color:rgba(224,169,46,.35)}
.tray a.trayall:hover{color:var(--brass-lit);border-color:var(--brass)}
.tray a:hover{border-color:var(--accent,var(--hairline-lit))}