/* The physical cup is the throw/continue control. The lower panel is readout. */
.cup-controls { position: absolute; top: 212px; left: 24px; width: 136px; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cup-trigger { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 136px; padding: 10px 6px 8px; color: #fff0cf; background: transparent; border: 1px solid #d9c18e36; border-radius: 15px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background .2s, border-color .2s; }
.cup-trigger:hover:not(:disabled) { background: #fff3c90b; border-color: #d9c18e94; }
.cup-trigger:focus-visible { outline: 3px solid #eed399; outline-offset: 4px; }
.cup-trigger:disabled { opacity: .65; cursor: default; }
.cup-trigger:disabled:has(.shaking) { opacity: 1; }
#roll .cup { position: relative; display: block; top: auto; left: auto; width: 78px; height: 103px; margin: 9px 0 12px; transform: rotate(-15deg); transform-origin: 50% 80%; transition: transform .2s, box-shadow .2s; }
#roll .cup-mouth { display: block; width: 80px; }
#roll .cup-seam { display: block; }
#roll .cup-mark { display: block; margin-top: 51px; }
.cup-trigger:hover:not(:disabled) .cup:not(.shaking) { transform: translateY(-4px) rotate(-10deg); box-shadow: 9px 18px 19px #061e2d80; }
.cup-action { display: block; max-width: 100%; color: #fff1c9; font-size: 12px; font-weight: 700; line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
.cup-hint { display: block; max-width: 100%; margin-top: 5px; color: #bdcbb0; font-size: 8px; line-height: 1.4; text-align: center; }
.cup-bank { min-height: 35px; width: 118px; padding: 9px 8px; background: #f4edd9; color: #264b38; border-color: #d9d7bb; box-shadow: 0 3px 6px #041e2433; }
.cup-bank:hover:not(:disabled) { background: #fff9e6; }
.cup-bank:disabled { opacity: .35; }
.cup-bank.liberate { background: #f4d99c; color: #244637; border-color: #f7e6bc; font-weight: 800; }
.opening-continue { position: absolute; z-index: 7; top: 54%; left: calc(50% + 68px); transform: translate(-50%,-50%); width: min(350px,calc(100% - 190px)); padding: 22px; background: #153c33f5; border: 1px solid #e0c78e; border-radius: 14px; color: #fff1d2; text-align: center; box-shadow: 0 12px 30px #071f1b66; }
.opening-continue>strong { display: block; font: 23px/1.2 Georgia,serif; }
.opening-continue>p { margin: 10px 0 16px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#start-first-hand { display: block; width: 100%; min-height: 48px; padding: 13px 12px; background: #f0d49a; color: #203e30; font-size: 14px; font-weight: 800; line-height: 1.35; border: 1px solid #fff0ca; box-shadow: 0 3px 9px #071f1b66; }
#start-first-hand:hover:not(:disabled) { background: #ffe6b0; }
.liberation-notice { margin: 12px 0; padding: 13px 17px; border: 1px solid #638a63; border-radius: 10px; background: #e9f0dc; color: #234b36; font-size: 12px; line-height: 1.6; }
.opponent.free { opacity: .8; }
.opponent.free .penalty-label, .opponent.free>small { color: #e9d699; }
.penalty-visual.free .no-stick { color: #f0daa3; }
.match-summary { margin: 18px 0; padding: 16px; border-radius: 12px; background: #e8eee2; }
.match-summary>p:not(.eyebrow) { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; margin: 8px 0; font-size: 13px; }
.table { --target-space: 84px; overflow: clip; }
.table:has(.target-board:not([hidden])) { height: calc(580px + var(--target-space)); }
.table:has(.target-board:not([hidden])) #scene { top: calc(182px + var(--target-space)); }
.table:has(.target-board:not([hidden])) .cup-controls { top: calc(212px + var(--target-space)); }
.target-board { position: sticky; top: 10px; z-index: 8; margin: 182px 20px 0 max(157px,calc((100% - 343px)/2)); max-width: 480px; padding: 8px 11px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; align-items: center; background: #efe9d6; border: 1px solid #d2c49d; border-left: 3px solid #b89a55; border-radius: 9px; color: #284738; box-shadow: 0 4px 10px #061e2326; }
.target-board .eyebrow { margin: 0 0 3px; font-size: 7px; letter-spacing: 1.2px; color: #7b6338; }
.target-copy { min-width: 0; }
.target-copy h2 { font: 17px/1.15 Georgia,serif; margin: 0; overflow-wrap: anywhere; }
.target-owner { display: flex; flex-wrap: wrap; gap: 2px 9px; margin: 4px 0 0; font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
.target-owner b { font-weight: 600; }
.target-preview { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.target-dice .mini-hand { gap: 3px; }
.target-dice .mini-die { width: 24px; height: 27px; }
.target-comparison { font-size: 9px; line-height: 1.2; color: #7b6338; }
.target-board[data-state="ahead"], .target-board[data-state="free"] { border-left-color: #4b7952; }
.target-board[data-state="ahead"] .target-comparison, .target-board[data-state="free"] .target-comparison { color: #35603a; }
.target-board[data-state="behind"] { border-left-color: #ad543e; }
.target-board[data-state="behind"] .target-comparison { color: #94432f; }
.target-board[data-state="tied"] .target-comparison { color: #86611c; }
#scene { left: 157px; right: 12px; }
.die-controls { left: 24%; right: 5%; }
.die-controls.aligned { left: 0; right: 0; height: 27px; display: block; pointer-events: none; }
.die-controls.aligned .die-toggle { position: absolute; top: 0; transform: translateX(-50%); width: clamp(36px,12%,78px); min-height: 26px; padding: 3px 2px; line-height: 1.1; white-space: nowrap; pointer-events: auto; }
.die-number { display: block; font-size: 7px; line-height: 8px; margin-bottom: 2px; }
.die-value { display: block; font-size: 8px; line-height: 9px; }
.action-panel .actions { align-self: center; }
#roll .cup:after { content: ''; position: absolute; inset: 3px 7px 5px 22px; border-radius: 7px 7px 20px 20px; background: linear-gradient(105deg,#fff0bd00,#fff0bd25 40%,#fff0bd00 80%); pointer-events: none; }
#roll .cup.shaking { animation: cup-toss 1.35s cubic-bezier(.36,.06,.4,.98) both; }
#roll .cup.shaking:after { animation: cup-gloss 1.35s ease-in-out both; }
.mini-die { background: linear-gradient(135deg,#e1d7af,#bfb68f); border-color: #b9af89; }
.mini-die.red { color: #880912; }
.mini-die.black { color: #15151f; }
.mini-die>.die-art { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 0 #f7ebcb55); }
@keyframes cup-toss {
  0%,100% { transform: translate(0,0) rotate(-15deg); }
  8% { transform: translate(-5px,-8px) rotate(-29deg) scale(1.03); }
  16% { transform: translate(5px,-15px) rotate(7deg) scale(1.03); }
  24% { transform: translate(-6px,-20px) rotate(-28deg) scale(1.04); }
  33% { transform: translate(18px,-22px) rotate(-88deg) scale(1.04); }
  45% { transform: translate(24px,-24px) rotate(-104deg); }
  56% { transform: translate(28px,-13px) rotate(-117deg); }
  66% { transform: translate(22px,-9px) rotate(-92deg); }
  73% { transform: translate(24px,-8px) rotate(-109deg); }
  84% { transform: translate(10px,-4px) rotate(-53deg); }
  94% { transform: translate(0,-2px) rotate(-11deg); }
}
@keyframes cup-gloss { 0%,100% { opacity: .7; } 30% { opacity: 1; } 55%,75% { opacity: .15; } }
@media(max-width:1100px) {
  .target-board { margin-left: max(126px,calc((100% - 370px)/2)); margin-right: 16px; }
  .target-dice .mini-die { width: 23px; height: 26px; }
  .opening-continue { left: calc(50% + 50px); width: min(350px,calc(100% - 150px)); padding: 18px; }
  .cup-controls { left: 16px; width: 110px; }
  .cup-trigger { width: 110px; padding-left: 3px; padding-right: 3px; }
  .cup-bank { width: 104px; }
  #scene { left: 126px; }
  .die-controls { left: 32%; right: 4%; }
  .cup-action { font-size: 11px; }
}
@media(max-width:500px) {
  .opening-continue { top: 320px; left: 50%; width: calc(100% - 36px); padding: 17px; }
  .opening-continue>strong { font-size: 22px; }
  .target-board { margin: 241px 14px 0; padding: 8px; gap: 7px; }
  .target-copy h2 { font-size: 15px; }
  .target-dice .mini-die { width: 21px; height: 24px; }
  .target-owner { font-size: 9px; }
  .table { height: 720px; }
  .table:has(.target-board:not([hidden])) { height: calc(760px + var(--target-space)); }
  .table:has(.target-board:not([hidden])) #scene { top: calc(241px + var(--target-space)); bottom: 340px; }
  .table:has(.target-board:not([hidden])) .cup-controls { top: auto; }
  #scene { top: 241px; left: 0; right: 0; bottom: 300px; }
  .die-controls { left: 15%; right: 7%; bottom: 337px; }
  .die-controls.aligned { left: 0; right: 0; }
  .die-value { font-size: 7px; }
  .table-caption { bottom: 315px; font-size: 7px; }
  .cup-controls { top: auto; left: 50%; bottom: 136px; width: 164px; transform: translateX(-50%); gap: 6px; }
  .cup-trigger { width: 164px; padding: 5px 6px; border-radius: 11px; }
  #roll .cup { width: 64px; height: 82px; margin: 7px 0 7px; }
  #roll .cup-mouth { width: 66px; height: 23px; top: -10px; }
  #roll .cup-mark { margin-top: 39px; font-size: 16px; }
  .cup-action { font-size: 11px; }
  .cup-hint { margin-top: 2px; font-size: 7px; }
  .cup-bank { width: 138px; min-height: 31px; padding: 7px; font-size: 11px; }
  .cup-trigger:hover:not(:disabled) .cup:not(.shaking) { transform: rotate(-15deg); }
}
@media(prefers-reduced-motion:reduce) {
  #roll .cup.shaking { animation: none; }
  #roll .cup.shaking:after { animation: none; }
  #roll .cup, .cup-trigger { transition: none; }
  .cup-trigger:hover:not(:disabled) .cup:not(.shaking) { transform: rotate(-15deg); }
}