/* Shared desktop/phone controls, matching the supplied polished table reference.
   Layout owns footer heights; these variables can be overridden by that layout. */
.control-panel{
  --deal-size:72px;--round-size:40px;--control-label-size:11px;--control-gap:17px;
  --deal-font-size:14px;--control-label-gap:5px;--control-ring:2px;
  background:#080807;box-shadow:0 -4px 18px #0009;
}
.control-panel .chip-shelf{
  position:relative;isolation:isolate;overflow:hidden;border:0;justify-content:center;
  background:radial-gradient(ellipse at 50% 0,#ffe7a738,transparent 66%),
    repeating-linear-gradient(0deg,#ffffd807 0 .5px,#2e19090b .5px 1.5px,transparent 1.5px 3px),
    linear-gradient(100deg,#472806 0%,#916022 15%,#e0af50 43%,#f3cf7a 50%,#bc8835 62%,#7c5018 84%,#422506 100%);
  box-shadow:inset 0 3px 2px #fff1ab55,inset 0 -5px 9px #33180399,0 2px 4px #000;
}
.control-panel .chip-shelf:before,.control-panel .chip-shelf:after{
  content:"";position:absolute;left:-7%;width:114%;height:22px;z-index:-1;pointer-events:none;
  border-radius:50%;border-top:3px solid #ffeab0;
  box-shadow:0 -1px 0 #8e4e0d,0 -3px 0 #f1b54e,0 1px 1px #4f2c0c,inset 0 2px 1px #fff3b9;
}
.control-panel .chip-shelf:before{top:0}
.control-panel .chip-shelf:after{bottom:-19px}
.control-panel .chip-shelf .chips{position:relative;z-index:1}
.control-panel .leather-console{
  isolation:isolate;
  background:radial-gradient(ellipse at 50% 0,#524a3526,transparent 60%),
    repeating-linear-gradient(38deg,#fff7d505 0 .6px,transparent .6px 2.6px,#0006 2.6px 3px,transparent 3px 5px),
    repeating-radial-gradient(ellipse at 20% 30%,#c5b78c08 0 .6px,#0003 .9px 1.5px,transparent 1.7px 3px),
    linear-gradient(105deg,#080908,#171713 45%,#080908);
  border-bottom:3px solid #d79d38;
  box-shadow:inset 0 3px 5px #000b,inset 0 -1px 0 #fff2b3,0 2px 0 #7e470d,0 4px 0 #f5d386;
}
.control-panel .leather-console:after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;pointer-events:none;
  background:linear-gradient(90deg,#845017,#fff2ae 18%,#cb8d2d 35%,#ffe5a1 51%,#b2751c 68%,#fff2ae 87%,#875018);
}
.control-panel .leather-console .round-actions{
  left:50%;top:50%;gap:var(--control-gap);align-items:center;overflow:visible;
  transform:translate(-50%,-50%);padding-bottom:0;
}
.control-panel .round-actions .round-button,
.control-panel .round-actions .deal-button{
  position:relative;flex:none;box-sizing:border-box;padding:0;border:var(--control-ring) solid transparent;border-radius:50%;
  color:#ffedaf;opacity:1;isolation:isolate;
  background:radial-gradient(ellipse at 40% 14%,#fff8d41c,transparent 57%) padding-box,
    linear-gradient(125deg,#23241f,#090a09 66%,#171711) padding-box,
    conic-gradient(from -30deg,#8e5415,#fff4bd 12%,#edbf62 22%,#7c4811 39%,#ffe8a2 52%,#bb7d22 68%,#fff3b3 83%,#8e5415) border-box;
  box-shadow:inset 0 0 0 1px #ffe7a259,inset 0 2px 4px #f8e6b31f,inset 0 -3px 5px #000a,
    0 0 0 1px #4c2b0b,0 2px 1px #060604,0 3px 7px #000b;
  transition:filter .16s,transform .16s;overflow:visible;text-shadow:0 2px 2px #000;
}
.control-panel .round-actions .round-button{
  width:var(--round-size);height:var(--round-size);display:flex;align-items:center;justify-content:center;
}
.control-panel .round-actions .round-button>span{
  display:grid;place-items:center;width:65%;height:65%;margin:0;font-size:0;line-height:1;color:#ffedaf;
  background-position:center;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 1px 1px #0008);
}
.control-panel #clear-button>span{background-image:url('/demo/slam-7/assets/controls/clear-gold.svg')}
.control-panel #rebet-button>span{background-image:url('/demo/slam-7/assets/controls/repeat-gold.svg')}
.control-panel #rebet-button[data-repeat-active=true]>span{background-image:none;font:700 calc(var(--round-size) * .4)/1 Arial,sans-serif}
.control-panel .round-actions .round-button>small{
  display:block;position:absolute;top:calc(100% + var(--control-label-gap));left:50%;transform:translateX(-50%);
  margin:0;font:700 var(--control-label-size)/1 Arial,sans-serif;letter-spacing:.15px;color:#fff1ad;
  white-space:nowrap;text-shadow:0 1px 2px #000,0 0 5px #000;pointer-events:none;
}
.control-panel .round-actions .deal-button{
  --control-ring:6px;width:var(--deal-size);height:var(--deal-size);
  font:800 var(--deal-font-size)/1.05 Arial,sans-serif;letter-spacing:.6px;
  box-shadow:inset 0 0 0 1px #fff1af,inset 0 0 0 3px #2f2415,inset 0 0 0 4px #d6b26b70,
    inset 0 4px 7px #fff3ba24,inset 0 -5px 9px #000c,0 0 0 1px #4c2b0b,0 0 0 2px #f5c66d,
    0 0 0 3px #754513,0 4px 8px #000b;
}
.control-panel .round-actions .deal-button:disabled{
  color:#c5ba93;font-size:calc(var(--deal-font-size) * .87);filter:saturate(.65) brightness(.82);
}
.control-panel .deal-button .deal-label{display:block;white-space:pre-line}
.control-panel .deal-button:is([data-label="REVEAL CARD"],[data-label="PEEL SLAM"],[data-label="CLICK SLAM"]) .deal-label{
  width:76%;margin:auto;font-size:calc(var(--deal-size) * .139);line-height:1.18;letter-spacing:0;
}
.control-panel .round-actions .round-button:disabled{opacity:.5;filter:saturate(.7)}
/* Outlined lettering preserves the reference proportions on every platform.
   The real text remains available to assistive technology and dynamic states. */
.control-panel #clear-button>small,
.control-panel #rebet-button:not([data-repeat-active=true])>small{
  height:var(--control-label-size);color:transparent;text-shadow:none;font-size:0;
  background:center/contain no-repeat;
}
.control-panel #clear-button>small{width:calc(var(--control-label-size) * 3.98131);background-image:url('/demo/slam-7/assets/typography/clear.svg')}
.control-panel #rebet-button:not([data-repeat-active=true])>small{width:calc(var(--control-label-size) * 4.41745);background-image:url('/demo/slam-7/assets/typography/repeat.svg')}
.control-panel .round-actions .deal-button[data-label=DEAL]{color:transparent;text-shadow:none}
.control-panel .deal-button[data-label=DEAL]:after{
  content:"";position:absolute;inset:0;background:url('/demo/slam-7/assets/typography/deal.svg') center/64% auto no-repeat;pointer-events:none;
}
.control-panel .round-actions button:hover:not(:disabled){filter:brightness(1.16);transform:translateY(-1px)}
.control-panel .round-actions button:active:not(:disabled){filter:brightness(.95);transform:translateY(1px)}
.control-panel .round-actions button:focus-visible{outline:2px solid #fff5be;outline-offset:5px}
@media(max-width:760px){
  .control-panel{--deal-size:70px;--round-size:34px;--control-label-size:10px;--control-gap:13px;--deal-font-size:13px}
}
@media(max-width:600px) and (orientation:portrait){
  .control-panel{--deal-size:clamp(60px,19vw,90px);--round-size:clamp(28px,8.2vw,40px);--control-label-size:clamp(8px,2.3vw,11px);--control-gap:clamp(10px,3.7vw,19px);--deal-font-size:clamp(12px,3.6vw,17px);--control-label-gap:4px;--control-ring:1.5px}
  .control-panel .round-actions .deal-button{--control-ring:5px}
  .control-panel .chip-shelf:before,.control-panel .chip-shelf:after{height:14px;border-top-width:2px}
  .control-panel .chip-shelf:after{bottom:-12px}
}
/* Match the compact landscape footer: the full ring and below-circle labels
   remain inside its 56px console rather than inheriting portrait button sizes. */
@media(max-width:1100px) and (max-height:520px) and (min-aspect-ratio:6/5){
  .control-panel{--deal-size:44px;--round-size:29px;--control-label-size:7px;--control-gap:12px;--deal-font-size:10px;--control-label-gap:3px;--control-ring:1.5px}
  .control-panel .round-actions .deal-button{--control-ring:4px;letter-spacing:.25px}
}
@media(max-width:700px) and (max-height:520px) and (min-aspect-ratio:6/5){.control-panel .chip-shelf .shelf-label{display:none}}
@media(prefers-reduced-motion:reduce){.control-panel .round-actions button{transition:none}}