:root {
  color-scheme:dark;
  --ivory:#f5ead2;
  --muted:#bcaf98;
  --gold:#d2b47b;
  --line:#b99a6340;
  --paper:#f4e8d1;
  --red:#8e2935;
  --sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:radial-gradient(ellipse at 48% 28%,#383027 0,#241f1a 48%,#191715 100%);
  color:var(--ivory);
  font:15px/1.6 var(--sans);
  min-height:100vh;
}
button,select {
  font:inherit;
}
button,a,select {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
  color:inherit;
}
button:disabled {
  cursor:default;
}
button:focus-visible,a:focus-visible,select:focus-visible {
  outline:3px solid #f5d995;
  outline-offset:4px;
}
button {
  transition:background .15s,box-shadow .15s,transform .15s;
}
a {
  color:inherit;
}
.topbar {
  height:64px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(24px,calc((100vw - 1280px)/2));
  background:#17141260;
}
.brand {
  text-decoration:none;
  font-size:12px;
  letter-spacing:2px;
  font-weight:800;
}
.brand span {
  color:var(--muted);
  font-size:10px;
  letter-spacing:1.6px;
}
.nav-actions {
  display:flex;
  gap:8px;
}
.nav-actions button {
  border:1px solid var(--line);
  background:#ffffff04;
  padding:6px 13px;
  border-radius:5px;
  font-size:12px;
}
.nav-actions button:hover {
  background:#ffffff0a;
}
.nav-actions button span {
  color:var(--gold);
  padding-right:4px;
}
main {
  max-width:1280px;
  margin:0 auto;
  padding:0 28px;
}
.hero {
  text-align:center;
  padding:29px 0 24px;
}
.eyebrow {
  font-size:10px;
  letter-spacing:2.6px;
  color:var(--gold);
  font-weight:750;
  margin:0 0 8px;
}
.hero h1 {
  font:500 clamp(52px,6vw,80px)/1 var(--serif);
  letter-spacing:-3.5px;
  margin:4px 0 12px;
  text-shadow:0 3px 0 #0006;
}
.tagline {
  font:italic 18px var(--serif);
  letter-spacing:.6px;
  margin:0;
  color:#d9ccb4;
}
.ornament {
  color:var(--gold);
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  margin:12px auto 6px;
  font-size:17px;
}
.ornament span {
  height:1px;
  width:60px;
  background:linear-gradient(90deg,transparent,#b69962);
}
.ornament span:last-child {
  transform:rotate(180deg);
}
.intro {
  font-size:12px;
  color:var(--muted);
  margin:0;
}
.setup {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:16px 20px;
  border-block:1px solid var(--line);
  margin-bottom:25px;
  background:#ffffff02;
}
.setting {
  display:flex;
  align-items:center;
  gap:12px;
}
.setting label {
  font-size:9px;
  color:var(--gold);
  letter-spacing:1.6px;
  font-weight:700;
}
.setting select {
  border:1px solid #a995734d;
  color:var(--ivory);
  background:#251f19;
  border-radius:4px;
  font-size:12px;
  padding:9px 25px 9px 11px;
  cursor:pointer;
}
.brass {
  border:1px solid #ddc18c;
  border-radius:5px;
  padding:9px 21px;
  background:linear-gradient(#dfc18a,#b69358);
  color:#302517;
  text-shadow:0 1px #fff3;
  box-shadow:inset 0 1px #fff6,0 3px 7px #0003;
  font-weight:750;
  font-size:12px;
}
.brass:hover {
  background:linear-gradient(#efcf97,#cba765);
  box-shadow:inset 0 1px #fff6,0 4px 12px #0005;
}
.brass span {
  padding-right:5px;
}
.play-area {
  display:grid;
  grid-template-columns:minmax(0,1fr) 205px;
  gap:37px;
  align-items:start;
}
.instruments {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:0 0 14px;
  border:1px solid var(--line);
  border-radius:6px;
  background:linear-gradient(#1c1915,#242019);
  box-shadow:inset 0 1px #ffffff04;
}
.instruments>div {
  text-align:center;
  position:relative;
  padding:10px 8px 8px;
}
.instruments>div+div:before {
  content:"";
  position:absolute;
  left:0;
  top:17px;
  bottom:17px;
  width:1px;
  background:var(--line);
}
.instrument-label {
  display:block;
  font-size:8px;
  letter-spacing:1.8px;
  color:var(--gold);
  font-weight:700;
}
.instruments strong {
  display:block;
  font:400 29px/1.3 var(--serif);
  font-variant-numeric:tabular-nums;
}
.instruments small {
  font-size:17px;
  color:#a6977d;
}
.table-rail {
  padding:13px;
  border-radius:14px;
  background:repeating-linear-gradient(2deg,#ffffff04 0px,#0000000c 1px,#ffffff00 3px,#00000008 5px),linear-gradient(110deg,#6f4833,#3a241d 36%,#704a34 68%,#39261f);
  box-shadow:inset 0 2px 1px #b7896460,inset 0 -3px 3px #100a08,0 16px 35px #0006,0 0 0 1px #aa7e4e55;
}
.felt {
  padding:17px 23px 12px;
  border:2px solid #171c13;
  border-radius:7px;
  background:radial-gradient(ellipse at 45% 30%,#2e624b30,transparent 80%),url('/assets/felt.svg'),#1c4737;
  box-shadow:inset 0 2px 13px #00110be6,0 0 0 1px #d7ad6540;
  position:relative;
}
.felt:before {
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid #c7b57a27;
  border-radius:5px;
  pointer-events:none;
}
.table-topline {
  display:flex;
  justify-content:space-between;
  color:#d1c7a5a8;
  font:8px var(--sans);
  letter-spacing:2px;
  margin:1px 0 19px;
}
.board {
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:13px 12px;
  perspective:1300px;
}
.board.full-pack {
  grid-template-columns:repeat(13,minmax(0,1fr));
  gap:10px 8px;
}
.card {
  padding:0;
  border:0;
  background:transparent;
  aspect-ratio: .69;
  position:relative;
  border-radius:5px;
  isolation:isolate;
  min-width:0;
  touch-action:manipulation;
}
.card-inner {
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transition:transform .48s cubic-bezier(.2,.65,.3,1),filter .3s;
  box-shadow:0 3px 4px #0006;
  border-radius:5px;
}
.card:not(:disabled):hover .card-inner {
  translate:0 -4px;
  box-shadow:0 8px 8px #0005;
}
.card.flipped .card-inner {
  transform:rotateY(180deg);
}
.card-back,.card-front {
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:5px;
  background-color:var(--paper);
  overflow:hidden;
  pointer-events:none;
}
.card-back {
  border:4px solid #ebddc0;
  background:#7e2936 url('/assets/card-back.svg') center/100% 100%;
  box-shadow:inset 0 0 0 1px #64202b,0 0 1px #0007;
}
.card-front {
  transform:rotateY(180deg);
  color:#222722;
  background:radial-gradient(ellipse at center,#fff8e8,#e8d9b9);
  box-shadow:inset 0 0 9px #ad8f5b33;
  border:1px solid #d4c5a8;
}
.card-front.red {
  color:var(--red);
}
.corner {
  position:absolute;
  left:7%;
  top:4%;
  font:600 clamp(12px,1.7vw,23px)/.95 var(--serif);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.corner small {
  font-size:.85em;
  line-height:1.25;
}
.corner.bottom {
  inset:auto 7% 4% auto;
  transform:rotate(180deg);
}
.pips {
  position:absolute;
  inset:20% 22%;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  justify-items:center;
  font-size:clamp(15px,2vw,29px);
  line-height:1;
}
.pips.ace {
  display:flex;
  justify-content:center;
  font-size:clamp(32px,4.8vw,65px);
}
.court {
  position:absolute;
  inset:17% 19%;
  width:62%;
  height:66%;
  border:1px solid currentColor;
}
.card.matched .card-inner {
  opacity:0;
  transform:rotateY(180deg) scale(.8);
  transition:opacity .6s,transform .6s;
  box-shadow:none;
}
.card.matching .card-inner {
  box-shadow:0 0 18px #f0d48b,0 0 0 2px #e6cc8f;
}
.card:focus-visible {
  outline:2px solid #f4d489;
  outline-offset:4px;
}
.board.waiting .card {
  filter:saturate(.75);
}
.table-bottomline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:16px 4px 0;
  color:#cab8866b;
  font-size:8px;
  letter-spacing:2.7px;
}
.table-bottomline>span:first-child,.table-bottomline>span:last-child {
  font-size:18px;
  line-height:1;
}
.status-line {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:55px;
}
.status-line p {
  font-size:12px;
  color:#d5c9b2;
  margin:0;
  text-align:center;
}
.status-line>span {
  height:5px;
  width:5px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 8px #d2b47b55;
}
.side-notes {
  padding-top:16px;
}
.chapter {
  font:italic 28px var(--serif);
  color:#ad9368;
  margin-bottom:15px;
}
.side-notes .eyebrow {
  font-size:8px;
  letter-spacing:1.9px;
}
.side-notes h2 {
  font:400 29px/1.15 var(--serif);
  margin:10px 0 17px;
  letter-spacing:-.5px;
}
.side-notes p:not(.eyebrow) {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  margin:0 0 15px;
}
.example {
  display:flex;
  gap:8px;
  margin:19px 0 13px;
  align-items:center;
  padding-left:5px;
}
.example>span {
  width:39px;
  height:53px;
  background:var(--paper);
  color:var(--red);
  border-radius:3px;
  font:600 21px/.9 var(--serif);
  padding:6px;
  display:block;
  transform:rotate(-9deg);
  box-shadow:0 3px 5px #0004;
}
.example>span+span {
  color:#263229;
  transform:rotate(9deg);
}
.example small {
  display:block;
  font-size:15px;
}
.side-notes .small-note {
  font-size:10px!important;
  color:#a6987e!important;
}
.note-rule {
  width:35px;
  height:1px;
  background:var(--line);
  margin:18px 0;
}
.text-button {
  background:none;
  border:0;
  border-bottom:1px solid #a78f6255;
  padding:0 0 3px;
  color:var(--gold);
  font-size:11px;
}
.text-button span {
  margin-left:8px;
}
.history-button {
  display:block;
  margin:26px 0 15px;
  border:1px solid #b297664f;
  background:linear-gradient(#55432b55,#29221866);
  border-radius:4px;
  padding:10px;
  color:#d6c39e;
  font-size:10px;
  width:100%;
}
.history-button span {
  font-size:16px;
  padding-right:4px;
}
.aside-footer {
  font:italic 12px/1.6 var(--serif)!important;
  color:#96876e!important;
}
.player-scores {
  display:flex;
  gap:10px;
  margin-top:15px;
}
.player-scores[hidden] {
  display:none;
}
.player-scores>div {
  flex:1;
  border:1px solid var(--line);
  border-radius:5px;
  padding:7px 12px;
  font-size:12px;
  color:var(--muted);
}
.player-scores strong {
  float:right;
  color:var(--ivory);
  font-weight:500;
}
.player-scores .active {
  background:#b99a6317;
  border-color:#b99a6399;
  color:var(--gold);
}
footer {
  border-top:1px solid var(--line);
  margin-top:33px;
  padding:17px 28px;
  display:flex;
  gap:20px;
  justify-content:center;
  font-size:10px;
  color:#a69881;
  align-items:center;
}
footer i {
  font-style:normal;
  margin:0 5px;
}
footer button {
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font-size:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}
dialog {
  max-width:520px;
  width:calc(100% - 32px);
  padding:7px;
  border:1px solid #bea16b;
  border-radius:8px;
  background:#473321;
  color:#382e23;
  box-shadow:0 25px 100px #0009;
  max-height:85dvh;
}
dialog::backdrop {
  background:#100d09bf;
  backdrop-filter:blur(5px);
}
.dialog-paper {
  position:relative;
  padding:32px;
  background:radial-gradient(ellipse at top,#fff7e6,#ebddbf);
  border:1px solid #967d4d;
}
.close {
  position:absolute;
  right:10px;
  top:6px;
  color:#665038;
  background:none;
  border:0;
  font-size:27px;
  line-height:1;
  padding:5px 8px;
}
.dialog-paper .eyebrow {
  color:#806131;
}
.dialog-paper h2 {
  font:400 34px/1.15 var(--serif);
  margin:8px 0 21px;
}
.dialog-paper p,.dialog-paper li {
  font-size:13px;
  line-height:1.8;
}
.dialog-paper ol {
  padding-left:20px;
}
.dialog-paper li {
  margin-bottom:9px;
}
.dialog-paper a {
  color:#68502c;
  text-underline-offset:3px;
}
.dialog-paper .source-note {
  font-size:10px;
  color:#7e6b50;
  border-top:1px solid #9b845e55;
  padding-top:12px;
  margin-top:20px;
}
.dialog-paper .result-number {
  font:400 56px/1 var(--serif);
  text-align:center;
  margin:24px 0 8px;
  color:#735b2c;
}
.dialog-paper .result-caption {
  text-align:center;
  color:#857252;
  font-size:10px;
  letter-spacing:2px;
}
.result-grid {
  display:flex;
  gap:20px;
  justify-content:center;
  margin:23px 0;
}
.result-grid>div {
  font-size:11px;
  text-align:center;
}
.result-grid strong {
  display:block;
  font:25px var(--serif);
}
#modal-actions {
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:22px;
}
.plain {
  background:none;
  border:1px solid #a9946b;
  color:#5a4933;
  border-radius:4px;
  font-size:12px;
  padding:8px 14px;
}
.record-row {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:10px 0;
  border-bottom:1px solid #9b845e44;
  font-size:12px;
}
.record-row strong {
  font-weight:600;
}
.record-heading {
  font:22px var(--serif);
  margin:20px 0 6px;
}
.confetti {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:10;
  overflow:hidden;
}
.confetti i {
  position:absolute;
  top:-25px;
  left:var(--x);
  width:6px;
  height:12px;
  background:var(--c);
  animation:fall 7s var(--delay) linear both;
}
@keyframes fall {
  to {
    transform:translateY(105vh) rotate(640deg);
  }
}
@media(min-width:1500px) {
  .hero {
    padding-top:38px;
    padding-bottom:30px;
  }
  .setup {
    margin-bottom:30px;
  }
  .play-area {
    gap:40px;
  }
  .board {
    gap:16px;
  }
  .felt {
    padding:22px 28px 16px;
  }
  .side-notes {
    padding-top:25px;
  }
}
@media(max-width:1100px) {
  .play-area {
    grid-template-columns:minmax(0,1fr) 175px;
    gap:25px;
  }
  .setting {
    display:block;
  }
  .setting label {
    display:block;
    margin-bottom:4px;
  }
  .board.full-pack {
    grid-template-columns:repeat(8,minmax(0,1fr));
  }
  .board {
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px;
  }
  .side-notes h2 {
    font-size:26px;
  }
  .setup {
    gap:24px;
  }
  .corner {
    font-size:20px;
  }
  .pips {
    font-size:22px;
  }
  .pips.ace {
    font-size:45px;
  }
}
@media(max-width:760px) {
  main {
    padding:0 18px;
  }
  .topbar {
    padding:0 18px;
    height:55px;
  }
  .brand {
    font-size:10px;
    letter-spacing:1.5px;
  }
  .brand span {
    font-size:8px;
    letter-spacing:1px;
  }
  .nav-actions button {
    font-size:10px;
    padding:5px 8px;
  }
  .hero {
    padding:26px 0 21px;
  }
  .hero h1 {
    font-size:63px;
  }
  .tagline {
    font-size:16px;
  }
  .intro {
    font-size:10px;
  }
  .setup {
    gap:10px;
    justify-content:space-between;
    padding:12px 0;
    margin-bottom:18px;
  }
  .setting label {
    font-size:8px;
  }
  .setting select {
    font-size:10px;
    padding:8px 4px;
    width:100%;
    max-width:180px;
  }
  .setup>.setting {
    flex:1;
    min-width:0;
  }
  .setup>.primary {
    font-size:10px;
    padding:10px;
    align-self:flex-end;
    white-space:nowrap;
  }
  .play-area {
    display:block;
  }
  .side-notes {
    padding:18px 4px 0;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:1fr auto;
    column-gap:20px;
  }
  .side-notes .chapter,.side-notes .example,.side-notes .small-note,.side-notes .note-rule,.side-notes .aside-footer {
    display:none;
  }
  .side-notes .eyebrow {
    grid-column:1/-1;
  }
  .side-notes h2 {
    font-size:24px;
    grid-column:1;
    margin-bottom:6px;
  }
  .side-notes h2 br {
    display:none;
  }
  .side-notes>p:not(.eyebrow) {
    font-size:11px;
    grid-column:1;
    margin-bottom:8px;
  }
  .side-notes>p:nth-of-type(4) {
    display:none;
  }
  .side-notes .text-button {
    grid-column:2;
    grid-row:2;
    align-self:center;
    white-space:nowrap;
  }
  .history-button {
    grid-column:2;
    grid-row:3;
    width:auto;
    margin:0;
    align-self:center;
    font-size:9px;
  }
  .instruments strong {
    font-size:27px;
  }
  .instrument-label {
    font-size:7px;
    letter-spacing:1.2px;
  }
  .board {
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:10px;
  }
  .table-rail {
    padding:10px;
  }
  .felt {
    padding:16px 17px 10px;
  }
  .table-topline {
    font-size:7px;
    letter-spacing:1.2px;
    margin-bottom:16px;
  }
  .table-bottomline {
    letter-spacing:1.7px;
    font-size:7px;
    margin-top:12px;
  }
  .card-back {
    border-width:3px;
  }
  .corner {
    font-size:18px;
  }
  .pips {
    font-size:19px;
  }
  .pips.ace {
    font-size:38px;
  }
  footer {
    margin-top:25px;
    flex-wrap:wrap;
    gap:5px 15px;
    padding:15px;
    font-size:9px;
  }
  footer>span:nth-child(2) {
    order:3;
    width:100%;
    text-align:center;
  }
  .board.full-pack {
    grid-template-columns:repeat(8,minmax(0,1fr));
  }
  .full-pack .corner {
    font-size:13px;
  }
  .full-pack .pips {
    font-size:14px;
  }
  .full-pack .pips.ace {
    font-size:28px;
  }
}
@media(max-width:480px) {
  .hero h1 {
    font-size:58px;
    letter-spacing:-2px;
  }
  .hero {
    padding-top:21px;
  }
  .intro {
    max-width:240px;
    margin:auto;
  }
  .board,.board.full-pack {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:11px 10px;
  }
  .felt {
    padding:15px 17px 10px;
  }
  .corner,.full-pack .corner {
    font-size:18px;
  }
  .pips,.full-pack .pips {
    font-size:22px;
  }
  .pips.ace,.full-pack .pips.ace {
    font-size:40px;
  }
  .table-topline {
    font-size:6px;
    letter-spacing:1px;
  }
  .setting select {
    font-size:9px;
    max-width:132px;
  }
  .setup {
    gap:8px;
  }
  .setting label {
    letter-spacing:.8px;
    font-size:7px;
  }
  .setup>.primary {
    font-size:9px;
    padding:9px 8px;
  }
  .primary span {
    display:none;
  }
  .side-notes {
    column-gap:10px;
  }
  .side-notes h2 {
    font-size:22px;
  }
  .history-button {
    padding:7px 5px;
    font-size:8px;
  }
  .history-button span {
    display:none;
  }
  .dialog-paper {
    padding:27px 22px;
  }
  .status-line p {
    font-size:11px;
  }
  .nav-actions {
    gap:5px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .card-inner {
    translate:none!important;
  }
}
.pip-field {
  position:absolute;
  inset:18% 23%;
  font:clamp(11px,1.6vw,22px)/1 var(--serif);
}
.pip-field i {
  position:absolute;
  left:var(--x);
  top:var(--y);
  font-style:normal;
  transform:translate(-50%,-50%) rotate(var(--rotation));
}
.full-pack .pip-field {
  font-size:clamp(10px,1.1vw,15px);
}
.full-pack .corner {
  font-size:clamp(13px,1.15vw,18px);
}
.full-pack .pips.ace {
  font-size:clamp(25px,3.5vw,47px);
}
@media(max-width:480px) {
  .full-pack .corner,.pip-field {
    font-size:16px;
  }
  .full-pack .pip-field {
    font-size:14px;
  }
}

/* Keep the whole quick layout together on a laptop; cards keep their proportions. */
main {
  max-width:1120px;
}
.topbar {
  height:52px;
}
.hero {
  padding:19px 0 13px;
}
.hero h1 {
  font-size:clamp(50px,5.5vw,72px);
  margin:0 0 8px;
}
.hero .ornament {
  margin:7px 0 0;
  font-size:13px;
}
.setup {
  padding:11px 12px;
  margin-bottom:16px;
}
.play-area {
  grid-template-columns:minmax(0,1fr) 190px;
  gap:29px;
}
.instruments {
  margin-bottom:0;
}
.instruments>div {
  padding:7px 8px 5px;
}
.status-line {
  min-height:37px;
  padding:5px 0;
}
.player-scores {
  margin-top:8px;
}
.felt {
  padding:13px 22px 10px;
}
.table-topline {
  margin-bottom:13px;
}
.table-bottomline {
  margin-top:12px;
}
.board {
  max-width:635px;
  margin:0 auto;
  gap:10px;
}
.board.full-pack {
  max-width:782px;
  gap:8px;
}
.side-notes {
  padding-top:11px;
}
footer {
  margin-top:24px;
}
@media(min-width:761px) and (max-width:1100px) {
  .setting {
    display:flex;
  }
  .setting label {
    margin-bottom:0;
  }
  .play-area {
    grid-template-columns:minmax(0,1fr) 172px;
    gap:21px;
  }
  .board {
    grid-template-columns:repeat(8,minmax(0,1fr));
  }
  .board.full-pack {
    grid-template-columns:repeat(13,minmax(0,1fr));
  }
  .full-pack .pip-field {
    font-size:clamp(8px,1.1vw,13px);
  }
  .full-pack .corner {
    font-size:12px;
  }
  .full-pack .pips.ace {
    font-size:25px;
  }
  .corner {
    font-size:16px;
  }
}
@media(min-width:761px) and (max-width:960px) {
  .board.full-pack {
    grid-template-columns:repeat(8,minmax(0,1fr));
  }
}
@media(max-width:760px) {
  .hero {
    padding:21px 0 12px;
  }
  .hero h1 {
    font-size:clamp(46px,10.5vw,63px);
  }
  .setup {
    padding:11px 0;
  }
  .felt {
    padding:13px 15px 9px;
  }
  .side-notes {
    margin-top:18px;
    padding-top:13px;
  }
  .board {
    gap:9px;
  }
  .status-line {
    min-height:39px;
  }
}
@media(min-width:390px) and (max-width:480px) {
  .board:not(.full-pack) {
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:8px;
  }
  .board:not(.full-pack) .corner {
    font-size:14px;
  }
  .board:not(.full-pack) .pips.ace {
    font-size:31px;
  }
  .board:not(.full-pack) .pip-field {
    font-size:12px;
  }
}
@media(max-width:480px) {
  .setting select {
    max-width:none;
  }
  .setting label {
    font-size:8px;
  }
  .setup>.primary {
    font-size:10px;
    padding:8px 9px;
  }
  .table-topline {
    font-size:7px;
  }
  .table-bottomline {
    letter-spacing:1.3px;
  }
  .side-notes .text-button,.history-button {
    font-size:10px;
  }
}
@media (max-width: 480px) {
  main { padding-inline: 13px; }
  .felt { padding-inline: 12px; }
  .setting select { padding-right: 1px; }
}