:root {
  --tw: 110px;
  --red: #d8262f; --red-hi: #f0484f; --red-lo: #a3161e; --red-deep: #6f0c12;
  --blue: #1f5fc8; --blue-hi: #3f82e6; --blue-lo: #143f8c; --blue-deep: #0b2558;
  --card: #fbf6ea; --ink: #1d1a17;
  --yellow: #ffcf2e;
  --wood: #8a5531;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; min-height: 100dvh; overflow-x: hidden; overflow-x: clip;
  font-family: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif; color: var(--ink);
  background-color: var(--wood);
  background-image:
    radial-gradient(120% 90% at 50% 40%, rgba(255, 214, 160, .22), rgba(0, 0, 0, .38) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.11' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.2  0 0 0 0 0.1  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #96603a, #7e4a29);
  background-size: auto, 900px 900px, auto;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

#table {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 14px 20px 18px;
}

/* ---------------------------------------------------------------- their tray, across the table */
#far { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 26px; width: 100%; min-height: 96px; }
#far > #opp { grid-column: 2; }
#far > #talk { grid-column: 3; }
.tray.blue {
  --mw: 25px;
  display: flex; align-items: flex-end; gap: 14px;
  padding: 10px 14px 12px; border-radius: 14px;
  background: linear-gradient(180deg, var(--blue-hi), var(--blue) 40%, var(--blue-lo));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 6px 0 var(--blue-deep), 0 12px 18px rgba(0, 0, 0, .35);
  transform: perspective(700px) rotateX(16deg); transform-origin: 50% 100%;
}
.mini-rows { display: flex; flex-direction: column; gap: 5px; }
.mini-row { display: flex; gap: 4px; padding-bottom: 4px; border-bottom: 2px solid rgba(0, 0, 0, .22); }
.mini { position: relative; width: var(--mw); height: calc(var(--mw) * 1.25); perspective: 160px; perspective-origin: 50% -80%; }
.mini::before { content: ''; position: absolute; inset: 2px; border-radius: 3px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .4); }
.mini-door {
  position: absolute; inset: 0; border-radius: 4px; transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .0) 0 3px, rgba(255, 255, 255, .12) 3px 4px),
    linear-gradient(180deg, var(--blue-hi), var(--blue) 60%, var(--blue-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 1px 2px rgba(0, 0, 0, .35);
  transition: transform .3s cubic-bezier(.55, .05, .9, .4), filter .3s;
}
.mini.down .mini-door { transform: rotateX(82deg); filter: brightness(.82); }

/* the mystery cards */
.stand { position: relative; padding: 0 4px 8px; }
.stand::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: 0; height: 12px; border-radius: 4px; background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)); }
.opp-stand::after { background: linear-gradient(180deg, var(--blue-hi), var(--blue-lo)); box-shadow: 0 2px 3px rgba(0, 0, 0, .3); }
.mystery {
  --w: 58px; position: relative; display: block; width: var(--w); height: calc(var(--w) * 1.42);
  padding: 0; border: 0; background: none; cursor: pointer; perspective: 600px;
}
.mystery:disabled { cursor: default; }
.mc-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.mc-back, .mc-front { position: absolute; inset: 0; border-radius: 5px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.mc-back {
  display: grid; place-items: center; border: 3px solid var(--card);
  background: repeating-linear-gradient(45deg, var(--blue) 0 6px, var(--blue-lo) 6px 12px);
}
.mc-back b { font: 400 calc(var(--w) * .62)/1 'Titan One', sans-serif; color: var(--yellow); text-shadow: 0 2px 0 var(--blue-deep), 0 0 6px rgba(0, 0, 0, .4); }
.mine .mc-back { background: repeating-linear-gradient(45deg, var(--red) 0 6px, var(--red-lo) 6px 12px); }
.mc-front { transform: rotateY(180deg); background: var(--card); display: flex; flex-direction: column; border: 2px solid var(--card); }
.mc-front img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: 3px 3px 0 0; }
.mc-front .plate { flex: 1; display: grid; place-items: center; text-align: center; font: 800 calc(var(--w) * .085)/.95 'Jost', sans-serif; text-transform: uppercase; letter-spacing: .01em; padding: 0 2px; overflow: hidden; }
.mine.knocked .mc-inner { transform: perspective(300px) rotateX(-70deg) rotateY(180deg); transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.55, .05, .9, .45); }
.mine .mc-inner { transform: rotateY(180deg); }
.mine.swap .mc-inner { transform: translateY(140%) rotateY(180deg); transition: transform .25s ease-in; }
.mystery.popped { z-index: 5; }
.mystery.popped .mc-inner { transform: translateY(10%) scale(1.75) rotateY(180deg); }   /* pops in place, inside the screen */

/* ---------------------------------------------------------------- the table talk */
#talk { min-width: 0; min-height: 64px; display: flex; align-items: center; }
.said { display: flex; align-items: center; gap: 14px; }
.said[hidden] { display: none; }
.said-q {
  display: inline-block; padding: 10px 16px 11px; border-radius: 10px; background: var(--card);
  font-weight: 600; font-size: 19px; line-height: 1.15; max-width: 330px;
  box-shadow: 0 2px 0 #d8ccb2, 0 8px 14px rgba(0, 0, 0, .3); border-top: 7px solid var(--red);
  transform: rotate(-1.5deg);
}
.said.them .said-q { border-top-color: var(--blue); transform: rotate(1.2deg); }
.said.in .said-q { animation: slap .32s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes slap { from { transform: translateY(-14px) rotate(-6deg) scale(1.06); opacity: 0; } }
.said-a {
  font: 400 34px/1 'Titan One', sans-serif; letter-spacing: .02em; color: #fff;
  -webkit-text-stroke: 1.5px rgba(60, 20, 5, .55); text-shadow: 0 3px 0 rgba(40, 14, 4, .55), 0 6px 12px rgba(0, 0, 0, .35);
  opacity: 0; transform: scale(.6); transition: opacity .15s, transform .25s cubic-bezier(.2, 1.6, .4, 1);
}
.said-a.show { opacity: 1; transform: rotate(-4deg); }
.said-a.yes { color: var(--yellow); }
.said-a.no { color: #fff; }

/* ---------------------------------------------------------------- your tray */
.tray.red {
  position: relative; padding: calc(var(--tw) * .13) calc(var(--tw) * .22) 0; border-radius: 22px;
  background: linear-gradient(180deg, var(--red-hi), var(--red) 18%, var(--red) 70%, var(--red-lo));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -4px 0 rgba(0, 0, 0, .2), 0 10px 0 var(--red-deep), 0 22px 34px rgba(0, 0, 0, .4);
}
#rows { display: flex; flex-direction: column; }
.row {
  position: relative; display: flex; justify-content: center; gap: calc(var(--tw) * .07);
  padding-bottom: calc(var(--tw) * .2);
}
.row::after { /* the step each row stands on */
  content: ''; position: absolute; left: calc(var(--tw) * -.1); right: calc(var(--tw) * -.1); bottom: calc(var(--tw) * .02); height: calc(var(--tw) * .16);
  border-radius: 4px; z-index: 0;
  background: linear-gradient(180deg, var(--red-lo), var(--red) 30%, var(--red-hi) 92%, rgba(255, 255, 255, .5));
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, .3);
}
.slot {
  position: relative; z-index: 1; width: var(--tw); height: var(--th, calc(var(--tw) * 1.5)); padding: 0; border: 0; background: none; cursor: pointer;
  perspective: calc(var(--tw) * 9); perspective-origin: 50% -45%;
}
.slot::before { /* the window you see when the frame is down */
  content: ''; position: absolute; inset: calc(var(--tw) * .05) calc(var(--tw) * .06) calc(var(--tw) * .04); border-radius: 5px;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .0) 0 5px, rgba(0, 0, 0, .1) 5px 6px), linear-gradient(180deg, var(--red-deep), var(--red-lo));
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .55);
}
.door {
  position: absolute; inset: 0; transform-origin: 50% 100%; transform-style: preserve-3d;
  transition: transform .34s cubic-bezier(.55, .05, .9, .45);
}
.front, .back { position: absolute; inset: 0; border-radius: calc(var(--tw) * .07); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.front {
  background: linear-gradient(180deg, var(--red-hi), var(--red) 22%, var(--red) 75%, var(--red-lo));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .2), 0 3px 4px rgba(0, 0, 0, .3);
}
.front::after { /* the grip at the top of the frame */
  content: ''; position: absolute; top: 2px; left: 38%; right: 38%; height: calc(var(--tw) * .035); border-radius: 3px;
  background: rgba(0, 0, 0, .14); box-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.back {
  transform: rotateX(180deg);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 calc(var(--tw) * .06), rgba(255, 255, 255, .12) calc(var(--tw) * .06) calc(var(--tw) * .075)),
    linear-gradient(0deg, var(--red-hi), var(--red) 50%, var(--red-lo));
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12);
}
.card {
  position: absolute; left: calc(var(--tw) * .07); right: calc(var(--tw) * .07); top: calc(var(--tw) * .075); bottom: calc(var(--tw) * .08);
  display: flex; flex-direction: column; background: var(--card); border-radius: calc(var(--tw) * .035); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 2px rgba(0, 0, 0, .18);
}
.card img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #ddd2bd; user-select: none; -webkit-user-drag: none; }
.plate { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 calc(var(--tw) * .03); }
.nm {
  display: block; width: 100%; max-height: 100%; overflow: hidden; text-align: center;
  font: 800 calc(var(--tw) * .088)/1.02 'Jost', sans-serif; letter-spacing: .02em; text-transform: uppercase; color: var(--ink);
}
.slot.down .door { transform: rotateX(-84deg); }
.slot.down { cursor: pointer; }
@media (hover: hover) {
  .slot:not(.down):hover .door { transform: translateY(-3px) rotateX(5deg); transition-duration: .15s; transition-timing-function: ease-out; }
  .slot.down:hover .door { transform: rotateX(-74deg); transition-duration: .15s; }
}
.slot.tipped .door { transform: translateZ(calc(var(--tw) * .5)) rotateX(10deg) !important; transition: transform .25s ease-out; }
.slot.picked .door { animation: wobble .5s ease-in-out infinite; }
/* your flips: the frames that don't fit rock on their hinges until you slap them down */
.slot.pending { touch-action: none; }
.slot.pending .door { animation: rock .62s ease-in-out var(--rk, 0s) infinite; }
.slot.pending .card { filter: brightness(.9); }
@keyframes rock { 0%, 100% { transform: rotateX(-3deg); } 50% { transform: rotateX(-22deg); } }
@keyframes wobble { 0%, 100% { transform: rotateX(0); } 50% { transform: rotateX(14deg) translateY(-2px); } }
.slot.winner .card { box-shadow: 0 0 0 3px var(--yellow), 0 0 calc(var(--tw) * .3) var(--yellow); }
body.guessing .slot:not(.down) .front { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 3px var(--yellow), 0 0 14px rgba(255, 207, 46, .8); animation: glint 1.1s ease-in-out infinite alternate; }
@keyframes glint { to { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 3px #fff3b8, 0 0 22px rgba(255, 207, 46, .95); } }
body.guessing .slot.down { cursor: not-allowed; }

#lip {
  display: block; width: calc(100% + calc(var(--tw) * .44)); margin: 0 calc(var(--tw) * -.22); height: calc(var(--tw) * .3);
  border: 0; padding: 0; cursor: pointer; border-radius: 0 0 22px 22px;
  background: linear-gradient(180deg, var(--red-lo), var(--red) 30%, var(--red) 80%, var(--red-lo));
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .18);
}
#lip span {
  font: 400 calc(var(--tw) * .19)/1 'Titan One', sans-serif; letter-spacing: .14em;
  color: #c41f28; text-shadow: 0 -1px 0 rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .5);
}
#lip:hover span { color: var(--red-hi); }

/* ---------------------------------------------------------------- your side: your card and your hand */
#near { display: flex; align-items: flex-end; justify-content: center; gap: 22px; width: 100%; }
.my-stand .mystery { --w: 74px; }
#hand { display: flex; align-items: flex-end; gap: 10px; min-height: 104px; }
.qcard {
  position: relative; width: 132px; height: 92px; flex: 0 0 auto; padding: 12px 12px 10px 12px; border: 0; border-radius: 10px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left;
  background: linear-gradient(180deg, #fffdf6, var(--card)); color: var(--ink);
  box-shadow: 0 2px 0 #d8ccb2, 0 8px 14px rgba(0, 0, 0, .32); border-top: 7px solid var(--red);
  transform: rotate(calc((var(--k, 2) - 2) * 1.6deg)); transition: transform .18s ease, opacity .2s, filter .2s;
}
.qcard .q-mark { position: absolute; top: 3px; right: 8px; font: 400 19px/1 'Titan One', sans-serif; color: var(--red); opacity: .9; }
.qcard .q-text { font-weight: 600; font-size: 16px; line-height: 1.12; padding-right: 8px; }
body.my-turn .qcard:not(:disabled):hover, .qcard:focus-visible { transform: translateY(-10px) rotate(0); }
.qcard:disabled { cursor: default; filter: saturate(.5) brightness(.82); transform: translateY(8px) rotate(calc((var(--k, 2) - 2) * 1.6deg)); }
.qcard.played { opacity: 0; transform: translateY(-60px) scale(.9); }
.qcard.guess { background: linear-gradient(180deg, var(--red-hi), var(--red)); color: #fff; border-top-color: var(--yellow); width: 104px; }
.qcard.guess .q-mark { color: var(--yellow); }
.qcard.guess .q-text { font-size: 20px; font-weight: 700; }
.qcard.guess[aria-pressed="true"] { transform: translateY(-14px); box-shadow: 0 0 0 3px var(--yellow), 0 10px 18px rgba(0, 0, 0, .4); }
.qcard.again { background: linear-gradient(180deg, #fff3a8, var(--yellow)); border-top-color: var(--red); width: 150px; transform: none; }
.qcard.again .q-text { font-size: 20px; font-weight: 700; }
.qcard.again:hover { transform: translateY(-8px); }
body.my-turn #hand .qcard:not(.guess):not(:disabled) { animation: deal .35s cubic-bezier(.2, 1.3, .4, 1) backwards; animation-delay: calc(var(--k, 0) * 40ms); }
@keyframes deal { from { transform: translateY(40px) rotate(8deg); opacity: 0; } }

/* sound */
#sound {
  position: fixed; right: 16px; bottom: 16px; z-index: 20; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, var(--red-hi), var(--red) 60%, var(--red-lo)); box-shadow: 0 3px 0 var(--red-deep), 0 6px 10px rgba(0, 0, 0, .35);
}
#sound[hidden] { display: none; }
#sound span { position: absolute; left: 11px; top: 14px; width: 7px; height: 12px; background: #fff; border-radius: 1px; }
#sound span::before { content: ''; position: absolute; left: 3px; top: -4px; border: 10px solid transparent; border-right-color: #fff; border-left: 0; }
#sound span::after { content: ''; position: absolute; left: 15px; top: -1px; width: 7px; height: 12px; border: 2px solid #fff; border-left: 0; border-radius: 0 10px 10px 0; }
#sound[aria-pressed="false"] span::after { border: 0; width: 2px; height: 16px; top: -2px; left: 18px; background: #fff; transform: rotate(45deg); border-radius: 1px; }

/* ---------------------------------------------------------------- the case study: the card held up close */
dialog { padding: 0; border: 0; background: none; max-width: none; max-height: none; }
dialog::backdrop { background: rgba(30, 14, 6, .62); }
#case, #about { width: min(1000px, calc(100vw - 32px)); }
.sheet {
  position: relative; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: auto; overscroll-behavior: contain;
  background: var(--card); border-radius: 22px; border: 12px solid var(--red);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12), 0 18px 50px rgba(0, 0, 0, .5);
  padding: 26px 30px 34px;
}
.close {
  position: sticky; top: 0; float: right; margin: -10px -14px 0 12px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; font: 700 28px/1 'Fredoka', sans-serif; color: #fff;
  background: radial-gradient(circle at 35% 30%, var(--red-hi), var(--red) 60%, var(--red-lo)); box-shadow: 0 3px 0 var(--red-deep), 0 5px 10px rgba(0, 0, 0, .3);
}
.case-head { display: flex; align-items: flex-end; gap: 26px; margin-bottom: 18px; }
.case-card {
  flex: 0 0 auto; width: 210px; background: #fff; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 0 0 8px var(--red), 0 0 0 10px var(--red-lo), 0 10px 18px rgba(0, 0, 0, .3); margin: 10px 10px 10px 10px; transform: rotate(-2deg);
}
.case-card img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.case-card .plate { min-height: 34px; font: 800 14px/1.05 'Jost', sans-serif; letter-spacing: .03em; text-transform: uppercase; text-align: center; padding: 6px; }
.case-titles { padding-bottom: 10px; }
.case-client { margin: 0 0 6px; font: 700 14px/1.2 'Jost', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--red-lo); }
.case-name { margin: 0; font: 400 clamp(30px, 5vw, 50px)/1 'Titan One', sans-serif; color: var(--red); text-shadow: 0 3px 0 rgba(0, 0, 0, .12); }
.case-body { clear: both; }
#case .ab-media { --ab-ink: var(--ink); font-family: 'Fredoka', system-ui, sans-serif; }
#case .ab-media h3 { font: 700 15px/1.2 'Jost', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--red-lo); }

.about-sheet { width: min(560px, 100%); margin: 0 auto; }
#about { width: min(560px, calc(100vw - 32px)); }
#about h2 { margin: 6px 0 4px; font: 400 40px/1 'Titan One', sans-serif; color: var(--red); }
.about-title { margin: 0 0 14px; font: 700 15px/1.3 'Jost', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.about-bio { font-size: 18px; line-height: 1.4; margin: 0 0 14px; }
.about-jobs { margin: 0 0 16px; padding: 0; list-style: none; font-size: 15px; line-height: 1.6; }
.about-contact a { color: var(--red-lo); font-weight: 600; }

/* ---------------------------------------------------------------- the box lid, while the faces load */
#loader {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; pointer-events: none;
  background: inherit; background-color: var(--wood);
  background-image: radial-gradient(120% 90% at 50% 40%, rgba(255, 214, 160, .22), rgba(0, 0, 0, .38) 100%), linear-gradient(180deg, #96603a, #7e4a29);
  transition: background-color .5s;
}
#loader[hidden] { display: none; }
#loader.off { background: transparent; }
.lid {
  position: relative; width: min(600px, 86vw); aspect-ratio: 1.45; border-radius: 16px;
  background: linear-gradient(180deg, var(--red-hi), var(--red) 30%, var(--red-lo));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 14px 0 var(--red-deep), 0 30px 50px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6%;
  transition: transform .75s cubic-bezier(.6, -.2, .8, .6);
}
#loader.off .lid { transform: translateY(-120vh) rotate(-8deg); }
.lid-band { display: flex; align-items: center; justify-content: center; gap: 6%; width: 88%; }
.lid-q {
  flex: 0 0 auto; width: 30%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--blue-hi), var(--blue) 60%, var(--blue-lo));
  box-shadow: 0 6px 0 var(--blue-deep), inset 0 3px 0 rgba(255, 255, 255, .3);
  font: 400 min(130px, 19vw)/1 'Titan One', sans-serif; color: var(--yellow); text-shadow: 0 6px 0 #c58a00, 0 10px 14px rgba(0, 0, 0, .35);
  transform: rotate(-8deg);
}
.lid-name {
  font: 400 min(60px, 8.6vw)/.98 'Titan One', sans-serif; color: var(--yellow); letter-spacing: .01em;
  text-shadow: 0 4px 0 #b97f00, 0 7px 0 var(--red-deep), 0 12px 16px rgba(0, 0, 0, .35);
  transform: skewX(-6deg) rotate(-3deg);
}
.lid-bar { position: absolute; left: 12%; right: 12%; bottom: 9%; height: 10px; border-radius: 6px; background: var(--red-deep); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .5); overflow: hidden; }
.lid-bar i { position: absolute; inset: 0; background: var(--yellow); transform-origin: 0 50%; transform: scaleX(0); transition: transform .2s; }

/* ---------------------------------------------------------------- phones */
html.narrow #table { display: block; padding: 0 0 var(--near-h, 118px); }
html.narrow #far {
  display: flex; position: sticky; top: 0; z-index: 10; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 4px 12px; min-height: 0; padding: 8px 8px 4px;
  background: linear-gradient(180deg, #7b4627 0%, rgba(123, 70, 39, .97) 85%, rgba(123, 70, 39, 0));
}
html.narrow .tray.blue { --mw: max(8px, min(14px, calc((100vw - 150px) / 17))); gap: 7px; padding: 5px 7px 6px; transform: none; border-radius: 9px; }
html.narrow .mini-rows { gap: 3px; }
html.narrow .mini-row { gap: 3px; padding-bottom: 3px; }
html.narrow .mystery { --w: 36px; }
html.narrow .stand { padding-bottom: 6px; }
html.narrow .stand::after { height: 9px; }
html.narrow .my-stand .mystery { --w: 40px; }
html.narrow #talk { min-width: 0; width: 100%; height: 46px; min-height: 0; justify-content: center; overflow: visible; }
html.narrow .said { gap: 10px; }
html.narrow .said-q { font-size: 14px; line-height: 1.1; padding: 5px 10px 6px; max-width: 250px; border-top-width: 5px; }
html.narrow .said-a { font-size: 22px; }
html.narrow .tray.red { margin: 4px auto 0; width: fit-content; padding: calc(var(--tw) * .14) calc(var(--tw) * .16) 0; border-radius: 14px; }
html.narrow .row { gap: 4px; }
html.narrow .nm { font-size: max(7px, calc(var(--tw) * .15)); line-height: 1; letter-spacing: .01em; }
html.narrow .plate { padding: 0 1px; }
html.narrow #lip { width: calc(100% + calc(var(--tw) * .32)); margin: 0 calc(var(--tw) * -.16); border-radius: 0 0 16px 16px; }
html.narrow #near {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; justify-content: center; gap: 0;
  padding: 14px 8px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, #6f3e21 0%, rgba(111, 62, 33, .97) 82%, rgba(111, 62, 33, 0));
}
html.narrow #hand { min-height: 84px; gap: 6px; justify-content: center; width: 100%; max-width: 420px; }
html.narrow .qcard { width: auto; flex: 1 1 0; min-width: 0; height: 84px; padding: 9px 8px 8px; transform: none; border-top-width: 6px; }
html.narrow .qcard .q-mark { font-size: 17px; top: 4px; right: 6px; }
html.narrow .qcard .q-text { font-size: 13.5px; padding-right: 0; }
html.narrow .qcard.guess { flex: 0 0 74px; width: 74px; }
html.narrow .qcard.again { flex: 0 0 160px; }
html.narrow .qcard.guess .q-text, html.narrow .qcard.again .q-text { font-size: 16px; }
html.narrow .qcard:disabled { transform: translateY(3px); }
html.narrow body.my-turn .qcard:not(:disabled):hover { transform: translateY(-3px); }
html.narrow #sound { position: absolute; top: auto; bottom: 8px; right: 8px; width: 32px; height: 32px; }   /* lives in the top bar on a phone, never over a face */
html.narrow #sound span { left: 7px; top: 10px; transform: scale(.85); }
html.narrow .mystery.popped .mc-inner { transform: translate(-10%, 22%) scale(1.7) rotateY(180deg); }
html.narrow #talk { justify-content: flex-start; padding-left: 4px; }
html.narrow .case-head { flex-direction: column; align-items: flex-start; gap: 14px; }
html.narrow .case-card { width: 150px; }
html.narrow .sheet { padding: 18px 16px 26px; border-width: 8px; }
html.narrow #case, html.narrow #about { width: calc(100vw - 16px); }

@media (prefers-reduced-motion: reduce) {
  .door, .mini-door, .mc-inner, .lid, .qcard { transition-duration: .01s !important; animation: none !important; }
}