/* Game surface and game-specific controls only. */
.highlow-shell,.play-area,.card-table{
  overscroll-behavior:none;
  touch-action:manipulation;
}
.card,.number-card{
  touch-action:manipulation;
}
[role=button]{-webkit-tap-highlight-color:transparent}
.golden-stage{overflow:hidden;border:1px solid #7b622f;border-radius:25px;padding:8px;background:linear-gradient(180deg,#111827dd,#06090fef);box-shadow:inset 0 1px #fff3,inset 0 -40px 80px #0008,0 22px 60px #000b}
.dice-table{position:relative;display:grid;min-height:224px;align-content:center;border:1px solid #705a2d;border-radius:19px;padding:20px 8px 17px;background:linear-gradient(#06080b44,#06080b55),url('assets/golden-dice-table.webp') center/cover no-repeat;box-shadow:inset 0 0 42px #0009}
.dice-row{display:flex;min-height:86px;align-items:center;justify-content:center;gap:clamp(4px,1.6vw,10px);perspective:700px}
.die-slot{position:relative;display:grid;width:clamp(54px,15.5vw,68px);height:82px;place-items:center;border:0;padding:0;background:none;color:inherit;cursor:pointer;perspective:420px}
.die-slot:after{content:"";position:absolute;right:7px;bottom:7px;left:7px;height:9px;border-radius:50%;background:#000b;filter:blur(5px)}
.die-slot.is-held:before{content:"";position:absolute;z-index:0;inset:2px 1px 3px;border:1px solid #f2d77c;border-radius:15px;background:#8a65263d;box-shadow:inset 0 0 18px #ffdc6677,0 0 13px #ffcf5544}
.die-slot.is-held .die-3d{transform:translateY(-5px) var(--face-transform)!important;filter:drop-shadow(0 0 7px #ffe290)}
.hold-label{position:absolute;z-index:3;bottom:-1px;color:#ffe5a0;font-size:7px;font-weight:900;letter-spacing:.13em;opacity:0}
.die-slot.is-held .hold-label{opacity:1}
.die-3d{--face-transform:rotateX(0) rotateY(0);position:relative;z-index:1;width:50px;height:50px;transform:var(--face-transform);transform-style:preserve-3d;transition:transform .35s cubic-bezier(.18,.78,.24,1.24),filter .2s;will-change:transform}
.die-3d[data-face="1"]{--face-transform:rotateX(0) rotateY(0)}
.die-3d[data-face="2"]{--face-transform:rotateX(-90deg) rotateY(0)}
.die-3d[data-face="3"]{--face-transform:rotateX(0) rotateY(-90deg)}
.die-3d[data-face="4"]{--face-transform:rotateX(0) rotateY(90deg)}
.die-3d[data-face="5"]{--face-transform:rotateX(90deg) rotateY(0)}
.die-3d[data-face="6"]{--face-transform:rotateX(0) rotateY(180deg)}
.die-face{position:absolute;inset:0;overflow:hidden;border:2px solid #888b89;border-radius:8px;background:linear-gradient(135deg,#fffef5,#deded4 43%,#aaaead);box-shadow:inset 3px 3px 3px #fff,inset -4px -5px 6px #5557;backface-visibility:hidden}
.face-front{transform:translateZ(25px)}
.face-back{transform:rotateY(180deg) translateZ(25px)}
.face-right{transform:rotateY(90deg) translateZ(25px)}
.face-left{transform:rotateY(-90deg) translateZ(25px)}
.face-top{transform:rotateX(90deg) translateZ(25px)}
.face-bottom{transform:rotateX(-90deg) translateZ(25px)}
.pip{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3c3c,#080909 68%);box-shadow:inset 0 1px 2px #000,0 1px 1px #fff8}
.pip.tl{left:8px;top:8px}
.pip.tr{right:8px;top:8px}
.pip.ml{left:8px;top:50%;transform:translateY(-50%)}
.pip.mc{left:50%;top:50%;transform:translate(-50%,-50%)}
.pip.mr{right:8px;top:50%;transform:translateY(-50%)}
.pip.bl{left:8px;bottom:8px}
.pip.br{right:8px;bottom:8px}
.roll-button{display:flex;width:min(100%,270px);min-height:46px;align-items:center;justify-content:center;gap:10px;margin:14px auto 0;border:1px solid #f5dda0;border-radius:999px;padding:9px 20px;background:linear-gradient(110deg,#aa7d2b,#f3dc91 48%,#ae812d);box-shadow:inset 0 1px #fff9,0 7px 18px #0009;color:#090806;font-weight:900;cursor:pointer}
.roll-gem{font-size:10px}
.scorecard-heading{display:flex;align-items:center;justify-content:space-between;padding:13px 5px 7px;color:#bda968;font-size:9px;font-weight:900;letter-spacing:.14em}
.scorecard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:hidden;border:1px solid #5f4c27;border-radius:14px;background:#070a10}
.category{display:grid;min-height:43px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px;border:0;border-right:1px solid #3a301d;border-bottom:1px solid #3a301d;padding:8px 9px;background:linear-gradient(145deg,#151b27,#090c12);color:#e4dccb;text-align:left;cursor:pointer}
.category:nth-child(2n){border-right:0}
.category-name{overflow:hidden;font-size:11px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}
.category-score{color:var(--gold-light);font:normal 16px Georgia,serif}
.category.is-available{background:linear-gradient(145deg,#1c2534,#0c1119)}
.category.is-scored{background:#080a0e;color:#756e62}
.category.is-scored .category-score{color:#9d8957}
.category.is-just-scored{animation:score-flash .65s ease}
.roll-button:focus-visible,.category:focus-visible,.die-slot:focus-visible{outline:3px solid #fff1b8;outline-offset:2px}
.result-dice{margin:6px auto;color:#f0d88c;font-size:74px;filter:drop-shadow(0 0 18px #d9b55d)}
.ad-reservation{display:grid;min-height:92px;place-items:center;margin-top:14px;border:1px dashed #67552f;border-radius:14px;color:#8e846f;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.preview-capture .ad-reservation{display:none}
.reduced-motion *{animation-duration:.01ms!important;transition-duration:.01ms!important}
@keyframes score-flash{45%{background:#785c1f;color:#fff;transform:scale(.985)}}
@media(max-width:370px){.die-3d{width:46px;height:46px}
.face-front{transform:translateZ(23px)}
.face-back{transform:rotateY(180deg) translateZ(23px)}
.face-right{transform:rotateY(90deg) translateZ(23px)}
.face-left{transform:rotateY(-90deg) translateZ(23px)}
.face-top{transform:rotateX(90deg) translateZ(23px)}
.face-bottom{transform:rotateX(-90deg) translateZ(23px)}
.category{padding-inline:7px}
.category-name{font-size:10px}}
@media(min-width:700px){.golden-stage{padding:14px}
.dice-table{min-height:300px}
.die-slot{width:108px;height:112px}
.die-3d{width:72px;height:72px}
.face-front{transform:translateZ(36px)}
.face-back{transform:rotateY(180deg) translateZ(36px)}
.face-right{transform:rotateY(90deg) translateZ(36px)}
.face-left{transform:rotateY(-90deg) translateZ(36px)}
.face-top{transform:rotateX(90deg) translateZ(36px)}
.face-bottom{transform:rotateX(-90deg) translateZ(36px)}
.scorecard{grid-template-columns:repeat(3,1fr)}
.category:nth-child(2n){border-right:1px solid #3a301d}
.category:nth-child(3n){border-right:0}}
.golden-stage{
  overflow: visible;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.dice-table{
  min-height: 145px;
  align-content: start;
  border: 0;
  border-radius: 0;
  padding: 22px 7px 8px;
  background-size: 125% auto;
  background-position: center;
  box-shadow: none;
}
.dice-row{ min-height: 68px; }
.die-slot{ height: 68px; }
.die-slot::after{ bottom: 4px; }
.golden-stage .die-slot:disabled,.golden-stage .category:disabled{
  opacity: 1;
}
.die-slot.is-held{
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.die-slot.is-held::before,.die-slot.is-held::after{ display: none; }
.die-slot.is-held .die-3d{
  z-index: 4;
  top: -5px;
  transform: var(--face-transform) !important;
  filter: none;
}
.hold-label{ top: -6px; bottom: auto; }
.roll-action-slot{
  display: grid;
  width: min(100%, 270px);
  min-height: 42px;
  margin: 20px auto 0;
  place-items: center;
}
.roll-action-slot .roll-button{
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding-block: 7px;
}
.choose-category-prompt{
  margin: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .035em;
  line-height: 42px;
  text-align: center;
}
.scorecard-heading{ padding-top: 24px; }
.category-name{ font-size: 14px; }
.category-score{ font-size: 20px; }
.category.is-scored,.category.is-scored:disabled{
  background: linear-gradient(110deg, #b8892f, #efd88c 52%, #9d7127);
  color: #141007;
  opacity: 1;
}
.category.is-scored .category-score{
  color: #171108;
  font-weight: 700;
}
@media (min-width: 700px){.golden-stage{ padding: 0; }
.dice-table{ min-height: 232px; }
.die-slot{ height: 96px; }
.category-name{ font-size: 15px; }
.category-score{ font-size: 21px; }}
.die-slot{
  min-width: 0;
}
.die-slot .closed-die{
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: block;
  width: 102px;
  height: 102px;
  filter: none;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, filter .2s ease;
}
.die-slot.is-held .closed-die{
  z-index: 4;
  transform: translate(-50%, calc(-50% - 5px));
  filter: none;
}
.die-slot .hold-label{
  position: absolute;
  z-index: 6;
  top: -6px;
  right: auto;
  bottom: auto;
  left: 50%;
  width: max-content;
  color: #ffe5a0;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1;
  opacity: 0;
  text-shadow: 0 2px 4px #000;
  transform: translate(-50%, 3px);
  transition: opacity .18s ease, transform .22s ease;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.die-slot.is-held .hold-label{
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (max-width: 370px){.die-slot .closed-die{ width: 92px; height: 92px; }}
@media (min-width: 700px){.die-slot .closed-die{ width: 138px; height: 138px; }
.die-slot .hold-label{ top: 2px; font-size: 9px; }}
