/* =====================================================================
   Switcheroo: a 1950s diner counter. Butter-yellow enamel walls, a
   cherry-red band and a chrome rail over a black-and-white tiled floor;
   the counter top is grey "cracked ice" laminate in a ribbed chrome rim,
   and the tumblers are red pebbled plastic (drawn by game.js). The cards
   are guest checks off the waitress's pad (pale green paper, green rules,
   a perforated top), the buttons cherry vinyl ringed in chrome. Chewy
   for every word, as on a diner's hand-painted window.
   ===================================================================== */

:root {
  --wall: #f7e6b0;
  --wall-seam: rgba(166, 120, 30, 0.13);
  --cherry: #d3263a;
  --cherry-deep: #8c1224;
  --cream: #fff8e6;
  --chrome-hi: #f6f8fa;
  --chrome: #c5cbd3;
  --chrome-lo: #7c8591;
  --ink: #2b2630;
  --ink-dim: #6c6270;
  --check: #f2f7ec;
  --check-rule: #c7dcbf;
  --check-ink: #3d7a4c;
  --formica: #e7e9ec;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Chewy", "Comic Sans MS", system-ui, sans-serif; font-weight: 400; color: var(--ink);
  background:
    /* the floor: two rows of black and white tiles, under a cherry band and a chrome rail */
    linear-gradient(180deg, var(--chrome-lo), var(--chrome-hi) 30%, var(--chrome) 60%, var(--chrome-lo)) 0 calc(100% - 64px) / 100% 8px no-repeat,
    linear-gradient(var(--cherry), var(--cherry)) 0 calc(100% - 52px) / 100% 12px no-repeat,
    conic-gradient(#25222a 25%, #f6f4ef 0 50%, #25222a 0 75%, #f6f4ef 0) 0 100% / 52px 52px repeat-x,
    /* the wall: enamel panels */
    repeating-linear-gradient(90deg, transparent 0 58px, var(--wall-seam) 58px 60px),
    linear-gradient(180deg, #fbefc6, var(--wall) 60%);
  background-color: var(--wall);
  overflow: hidden;
}

.nav-back-games {
  position: fixed; top: 16px; left: 18px; z-index: 50;
  font-family: inherit; font-size: 17px; font-weight: 400; letter-spacing: 0.3px;
  color: var(--cream); text-decoration: none;
  background: var(--cherry); border: 3px solid var(--chrome); border-radius: 999px;
  box-shadow: 0 0 0 1px var(--chrome-lo), 0 3px 0 1px var(--cherry-deep);
  padding: 4px 15px;
}
.nav-back-games:hover { filter: brightness(1.08); }
/* the sound and pause buttons beside it are given a bold weight inline;
   Chewy has one weight only, so the browser would fake a bold */
.mute-toggle, .gs-pause-btn { font-weight: 400 !important; }

/* ---- the counter ------------------------------------------------------------------- */
.diner { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 62px 16px 82px; gap: 10px; }
.hud {
  display: flex; gap: 18px; align-items: center; justify-content: center;
  font-size: 18px; letter-spacing: 0.4px; color: var(--cream);
  background: var(--cherry); border: 3px solid var(--chrome); border-radius: 999px; padding: 3px 18px;
  box-shadow: 0 0 0 1px var(--chrome-lo), 0 3px 0 1px var(--cherry-deep);
}
.hud[hidden] { display: none; }
.hud b { font-weight: 400; font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; }
.hud .stat { white-space: nowrap; }
/* lives: three little tumblers, a lost one gone pale */
.lives { display: inline-flex; gap: 5px; align-items: flex-end; height: 22px; }
.lives i { display: block; width: 15px; height: 18px; background: var(--cream); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.lives i.lost { background: rgba(255, 248, 230, 0.3); }
html.fx-on .lives i.lost { animation: life-gone 0.5s ease-out; }
@keyframes life-gone { 0% { transform: translateY(0) scale(1.3); background: #fff; } 100% { transform: none; } }

/* the question: what the counter asks, the colour's own marble beside its name */
.ask { min-height: 38px; font-size: 30px; line-height: 38px; text-align: center; color: var(--ink); letter-spacing: 0.3px; white-space: nowrap; }
.ask .swatch {
  display: inline-block; width: 0.82em; height: 0.82em; border-radius: 50%; vertical-align: -0.08em; margin: 0 0.12em 0 0.06em;
  background: radial-gradient(circle at 34% 30%, var(--hi) 0 14%, var(--col) 46%, var(--lo) 100%);
  box-shadow: 0 2px 0 rgba(43, 38, 48, 0.35);
}
.ask .name {
  color: var(--col);
  text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink),
    1.4px 1.4px 0 var(--ink), -1.4px 1.4px 0 var(--ink), 1.4px -1.4px 0 var(--ink), -1.4px -1.4px 0 var(--ink);
}
.ask.good { color: var(--check-ink); }
.ask.bad { color: var(--cherry); }

/* the counter top: grey cracked-ice laminate with silver flecks, in a ribbed chrome rim */
.counter {
  flex: 1; width: 100%; max-width: 980px; max-height: 560px; min-height: 180px; position: relative;
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.5px) 0 0 / 23px 19px,
    radial-gradient(circle at 70% 60%, rgba(150, 158, 170, 0.55) 0 1px, transparent 1.5px) 0 0 / 31px 27px,
    repeating-linear-gradient(118deg, transparent 0 34px, rgba(255, 255, 255, 0.5) 34px 35px, transparent 35px 71px),
    repeating-linear-gradient(32deg, transparent 0 47px, rgba(140, 150, 162, 0.22) 47px 48px, transparent 48px 89px),
    linear-gradient(180deg, #eef0f2, var(--formica) 55%, #dcdfe3);
  box-shadow:
    0 0 0 2px var(--chrome-lo), 0 0 0 5px var(--chrome-hi), 0 0 0 8px var(--chrome), 0 0 0 10px var(--chrome-lo),
    0 14px 0 8px rgba(43, 38, 48, 0.18);
}
.counter canvas { position: absolute; left: 0; top: 0; display: block; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* paused (game.js): the tumblers go from sight for the whole pause, so it's no
   free look; the round's clock stands still meanwhile, and on resume the
   shuffle carries on from the frame it stopped at */
body.paused .counter canvas { visibility: hidden; }

.keys { font-size: 16px; color: var(--ink-dim); text-align: center; letter-spacing: 0.3px; }

/* ---- the cards: guest checks ------------------------------------------------------- */
.panel { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 26px 16px; overflow-y: auto; background: rgba(43, 38, 48, 0.32); }
.panel[hidden] { display: none; }
.panel > .card { margin: auto; }
.card {
  position: relative; width: min(460px, 100%); padding: 0 24px 18px; text-align: center;
  background: var(--check);
  border: 1px solid #a7c19e; border-radius: 4px 4px 8px 8px;
  box-shadow: 0 2px 0 #d9e6d2, 0 16px 36px rgba(60, 40, 10, 0.32);
}
/* the pad's printed head, and the perforations it was torn off along */
.card::before {
  content: "Guest check \00b7  No. 1958"; display: block; margin: 0 -24px 12px; padding: 12px 0 6px;
  font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--check-ink);
  border-bottom: 2px solid var(--check-ink);
}
.card::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 6px;
  background: radial-gradient(circle at 50% 0, rgba(43, 38, 48, 0.42) 0 2.5px, transparent 3px) 0 0 / 12px 6px repeat-x;
}
.card h1, .card h2 { font-weight: 400; color: var(--cherry); line-height: 1; text-shadow: 0 3px 0 rgba(140, 18, 36, 0.25); }
.card h1 { font-size: 52px; letter-spacing: 1px; }
.card h2 { font-size: 38px; }
.card .tag { font-size: 16px; letter-spacing: 1.5px; color: var(--check-ink); margin: 6px 0 10px; }
/* the how-to written on the check's green rules, a line of writing on each */
.card .how {
  --lh: 28px; font-size: 17px; line-height: var(--lh); text-align: left; margin-bottom: 14px;
  background: repeating-linear-gradient(180deg, transparent 0 calc(var(--lh) - 2px), var(--check-rule) calc(var(--lh) - 2px) calc(var(--lh) - 1px), transparent calc(var(--lh) - 1px) var(--lh));
}
/* the way to play: two specials on the check, the one picked in cherry vinyl */
.seg { display: flex; gap: 10px; margin-bottom: 14px; }
.seg button {
  flex: 1 1 0; min-width: 0; font-family: inherit; font-weight: 400; cursor: pointer; color: var(--ink); letter-spacing: 0.3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 5px 8px 7px;
  background: var(--cream); border: 2px solid var(--chrome); border-radius: 14px;
  box-shadow: 0 0 0 1px var(--chrome-lo), 0 3px 0 1px var(--chrome-lo);
}
.seg b { font-weight: 400; font-size: 21px; line-height: 1.15; }
.seg small { font-size: 14px; line-height: 1.2; color: var(--ink-dim); }
.seg button[aria-pressed="true"] { color: var(--cream); background: var(--cherry); box-shadow: 0 0 0 1px var(--chrome-lo), 0 3px 0 1px var(--cherry-deep); }
.seg button[aria-pressed="true"] small { color: rgba(255, 248, 230, 0.86); }
.seg button:hover { filter: brightness(1.05); }
.seg button:active { transform: translateY(2px); box-shadow: 0 0 0 1px var(--chrome-lo), 0 1px 0 1px var(--chrome-lo); }
.seg button[aria-pressed="true"]:active { box-shadow: 0 0 0 1px var(--chrome-lo), 0 1px 0 1px var(--cherry-deep); }
.playbtn, .card .row button {
  font-family: inherit; font-weight: 400; cursor: pointer; color: var(--cream); letter-spacing: 0.5px;
  background: var(--cherry); border: 3px solid var(--chrome); border-radius: 999px;
  box-shadow: 0 0 0 1px var(--chrome-lo), 0 4px 0 1px var(--cherry-deep);
}
.playbtn { width: 100%; font-size: 24px; padding: 8px 14px; }
.playbtn:active, .card .row button:active { transform: translateY(3px); box-shadow: 0 0 0 1px var(--chrome-lo), 0 1px 0 1px var(--cherry-deep); }
.playbtn:hover, .card .row button:hover { filter: brightness(1.07); }
.card .row button.ghost { color: var(--ink); background: linear-gradient(180deg, var(--chrome-hi), var(--chrome)); box-shadow: 0 0 0 1px var(--chrome-lo), 0 4px 0 1px var(--chrome-lo); }
.tally { margin-top: 12px; font-size: 17px; color: var(--ink-dim); min-height: 22px; }
.card.end .big { font-size: 46px; line-height: 1.1; color: var(--ink); margin: 6px 0 4px; }
.card .stats { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 2px 0 16px; font-size: 17px; color: var(--ink-dim); }
.stats .best { color: var(--ink); background: var(--cream); border: 2px solid var(--ink); border-radius: 999px; padding: 1px 14px; }
.stats .best.record { color: var(--cream); background: var(--check-ink); border-color: #24502f; }
.card .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.card .row button { font-size: 20px; padding: 6px 18px; }
#over .row .playbtn { width: auto; flex: 1 1 auto; }

/* the pause card and the boxes that ask: the back link's cherry and chrome, in Chewy */
.gs-pause { background: rgba(43, 38, 48, 0.55); }
.gs-pause-card h2, .gs-pause-card button { font-weight: 400; letter-spacing: 0.4px; }
.gs-pause-card h2 { font-size: 1.9rem; }
.gs-pause-card p { font-size: 1rem; }

/* ---- small screens ------------------------------------------------------------------- */
@media (max-width: 560px) {
  .diner { padding: 58px 10px 70px; gap: 8px; }
  body {
    background:
      linear-gradient(180deg, var(--chrome-lo), var(--chrome-hi) 30%, var(--chrome) 60%, var(--chrome-lo)) 0 calc(100% - 52px) / 100% 7px no-repeat,
      linear-gradient(var(--cherry), var(--cherry)) 0 calc(100% - 42px) / 100% 10px no-repeat,
      conic-gradient(#25222a 25%, #f6f4ef 0 50%, #25222a 0 75%, #f6f4ef 0) 0 100% / 42px 42px repeat-x,
      repeating-linear-gradient(90deg, transparent 0 46px, var(--wall-seam) 46px 48px),
      linear-gradient(180deg, #fbefc6, var(--wall) 60%);
  }
  .hud { gap: 12px; font-size: 16px; padding: 2px 13px; }
  .hud b { font-size: 19px; }
  .ask { font-size: 24px; min-height: 32px; line-height: 32px; }
  .counter { border-radius: 16px; }
  .keys { font-size: 14px; }
  .panel { padding: 60px 12px 14px; }
  .card { padding: 0 16px 14px; }
  .card::before { margin: 0 -16px 8px; padding: 10px 0 5px; font-size: 12px; }
  .card h1 { font-size: 42px; }
  .card h2 { font-size: 32px; }
  .card .tag { margin: 4px 0 6px; }
  .card .how { --lh: 24px; font-size: 16px; margin-bottom: 10px; }
  .seg { gap: 8px; margin-bottom: 10px; }
  .seg button { padding: 4px 6px 6px; }
  .seg b { font-size: 19px; }
  .seg small { font-size: 13px; }
  .playbtn { font-size: 22px; padding: 6px 12px; }
  .tally { margin-top: 8px; font-size: 16px; }
}
/* a short phone: the card's spacing closes up (none of its words go) */
@media (max-width: 560px) and (max-height: 600px) {
  .card h1 { font-size: 38px; }
  .card::before { margin-bottom: 6px; padding: 8px 0 4px; }
  .card .tag { margin: 3px 0 5px; }
  .card .how { --lh: 19px; font-size: 15px; margin-bottom: 8px; }
  .seg { margin-bottom: 8px; }
  .seg button { padding: 3px 6px 5px; }
  .playbtn { padding: 4px 12px; }
  .tally { margin-top: 6px; }
}
/* a short laptop screen: the same */
@media (min-width: 561px) and (max-height: 700px) {
  .diner { padding-bottom: 74px; gap: 8px; }
  .card .how { --lh: 25px; font-size: 16px; }
}