/* The deck: side panels and their latching buttons. */

#bottom{display:flex;gap:14px;align-items:stretch;justify-content:center;flex:0 0 auto;}
.case{
  background:linear-gradient(180deg,var(--deck) 0%,var(--deck-dark) 100%);
  border-radius:0 0 6px 6px;
  padding:14px 12px 16px;
  box-shadow:0 18px 40px -6px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.3);
}
.panel{position:relative;flex:0 0 auto;display:flex;flex-direction:column;justify-content:space-between;}
.cols{display:flex;gap:10px;}
.col2{display:flex;flex-direction:column;gap:7px;width:112px;}

/* Fixed height AND line-height:1. Both, not one: a CJK glyph is taller than
   a Latin one, and an auto-height label grows on a language change and
   pushes the whole panel down. */
.lbl{
  height:24px;flex:0 0 auto;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.16em;
  color:#463E2E;
  padding-bottom:4px;
  border-bottom:1px solid rgba(70,60,40,.38);
  text-shadow:0 1px 0 rgba(255,255,255,.28);
}

.langrow{display:flex;gap:6px;margin-top:10px;}
.langrow .pbtn{flex:1 1 0;padding:0;}

.pbtn{
  height:34px;flex:0 0 auto;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  white-space:nowrap;line-height:1;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:10.5px;letter-spacing:.04em;font-weight:600;
  color:var(--legend);
  background:linear-gradient(180deg,#6E6D5F 0%, var(--keycap) 42%, var(--keycap-lo) 100%);
  border:none;border-radius:4px;padding:0 8px;cursor:pointer;
  box-shadow:0 3px 0 #35342D, 0 4px 7px rgba(0,0,0,.42), inset 0 1px 1px rgba(255,255,255,.18);
  transition:transform .06s ease-out, box-shadow .06s ease-out, color .12s, filter .12s;
}
.pbtn:hover:not(:disabled){filter:brightness(1.1);}
.pbtn:active:not(:disabled){
  transform:translateY(3px);
  box-shadow:0 0 0 #35342D, inset 0 2px 4px rgba(0,0,0,.5);
}
/* Latched: the button stays down, as a mechanical switch would. */
.pbtn.on{
  transform:translateY(3px);
  box-shadow:0 0 0 #35342D, inset 0 2px 5px rgba(0,0,0,.6);
  background:linear-gradient(180deg,#4A493F 0%, #55544A 100%);
  color:var(--amber);
  text-shadow:0 0 6px rgba(232,163,60,.5);
}
/* The one button the game is actually played with.

   Distinguished by the BODY, not by the legend: on a deck of identical dark
   keycaps, an illuminated pushbutton is the thing your hand goes to. The
   colour is the amber already used for the bell lamp, so it belongs to the
   machine rather than to a website.

   It spends most of its life disabled -- one guess per round -- and the
   :disabled rule below desaturates it back into the row, which is exactly
   the signal wanted: lit means there is a bet to place. */
.pbtn.primary{
  color:#2A1F10;
  background:linear-gradient(180deg,#F2B963 0%, var(--amber) 46%, #C4842A 100%);
  text-shadow:0 1px 0 rgba(255,255,255,.32);
  box-shadow:
    0 3px 0 #6B4715,
    0 4px 9px rgba(0,0,0,.42),
    0 0 14px rgba(232,163,60,.30),
    inset 0 1px 1px rgba(255,255,255,.45);
}
.pbtn.primary:hover:not(:disabled){filter:brightness(1.07);}
.pbtn.primary:active:not(:disabled){
  box-shadow:0 0 0 #6B4715, inset 0 2px 5px rgba(90,55,10,.55);
}
/* The amber focus ring is invisible on an amber button. */
.pbtn.primary:focus-visible{outline-color:#2A1F10;}

.pbtn:disabled{opacity:.34;cursor:not-allowed;filter:grayscale(.6);}
.pbtn:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}

#vol{width:100%;accent-color:var(--amber);height:16px;margin:4px 0 0;flex:0 0 auto;}