/* CIRCUS_A_TYPE_V2 2026-11-06 – presentation only, original engine untouched.
 * Requires the exact daredemo_slot DOM contract from pinned cc572121 commit.
 */
:root { color-scheme: dark; }
body {
  min-width: 320px;
  min-height: 100dvh;
  background: radial-gradient(ellipse 70% 65% at 50% 30%, #621126 0%, #1b0716 68%, #0d0714 100%) fixed !important;
}
body > #root { min-height: 100dvh; }
#root > .app, #root .app {
  width: 100%; max-width: 900px; margin: 0 auto;
  padding: clamp(4px, 1.1vw, 12px);
}
/* Controls remain in React's DOM for Game Management configuration sync,
   but are not visible to players. Only the cabinet is shown. */
.app > .machine-select-row, .app > .status-row,
.app > .log, .app > .tab-bar, .app > .tab-content { display:none !important; }
.app > .cabinet {
  position:relative;
  display:block;
  overflow:hidden;
  width:100%;
  margin:auto;
  padding: 8px clamp(10px,2.4vw,30px) clamp(18px,3vw,30px);
  border: clamp(5px, .9vw, 10px) solid #d99c22;
  border-radius: clamp(16px,2.7vw,32px);
  background: radial-gradient(ellipse at 50% 3%,#921024 0%,#5c0922 43%,#23071b 90%) !important;
  box-shadow: inset 0 0 0 3px #ffe17e, inset 0 0 35px #080114, 0 0 0 3px #5b191d,
              0 12px 58px rgba(0,0,0,.75), 0 0 60px rgba(238,46,48,.26);
}
/* Composite top is based on a newly generated original circus clown artwork. */
.app > .cabinet::before {
  content:"";
  display:block;
  width:min(100%,740px);
  aspect-ratio: 2.0;
  max-height:min(29dvh,310px);
  margin: 0 auto -3px;
  background-image:url("./circus_marquee.png");
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:contain;
  pointer-events:none;
  filter:drop-shadow(0 5px 9px rgba(0,0,0,.55));
}
.app > .cabinet::after {
  content: "CIRCUS  JUGGLER";
  display:block;
  max-width: 690px;
  margin: clamp(12px, 2vw, 20px) auto 0;
  border: 4px ridge #ffc957;
  border-radius: 16px;
  padding: clamp(11px,2.5vw,22px) 4px;
  background: repeating-linear-gradient(18deg,#a7091b 0,#c9172c 20px,#930615 44px);
  box-shadow: 0 0 0 3px #7c2d12, inset 0 0 25px #4c0713,0 0 20px #e88e27;
  font: 1000 clamp(20px,5vw,50px)/1.1 Georgia, 'Times New Roman',serif;
  letter-spacing:clamp(1px,.7vw,7px);
  color:#fff7dc;
  text-shadow: 0 3px 0 #9b244d, 3px 5px 0 #262063, -2px -2px 0 #ae760c, 0 0 14px #ffcf43;
}
/* An upstream optional panel image is displaced by the circus marquee. */
.app > .cabinet > .panel-art {display:none !important;}
.app > .cabinet .lamp-row {margin:0 auto 8px; min-height:24px;}
.app > .cabinet .reels {
  border:5px ridge #ffc149;
  border-radius:14px;
  background:linear-gradient(#200809,#6f0e22 22%,#13080f 76%,#421024);
  margin:0 auto clamp(8px,1.8vw,20px);
  box-shadow:inset 0 0 0 3px #31050e,0 0 16px #db9d35,0 4px 12px #10040d;
}
.app > .cabinet .reel {background:#f9e5cd;border:2px solid #1f0913;}
.app > .cabinet .status-lamps {margin:clamp(7px,1vw,12px) auto !important;}
.app > .cabinet .controls {
  display:grid !important;
  grid-template-columns: 1fr 1.3fr repeat(3, 1fr);
  gap:clamp(3px,1.1vw,12px);
  max-width:690px; margin: 12px auto 14px;
}
.app > .cabinet .controls button {
  min-width:0 !important;
  width:100% !important;
  padding:clamp(8px,1.3vw,14px) 3px !important;
  min-height:clamp(42px,7vw,62px);
  border:3px ridge #ffc94c;
  border-radius: 999px;
  font-size:clamp(10px,1.9vw,18px);
  line-height:1.15;
  box-shadow:inset 0 3px 4px #ffffff56,0 3px 7px #16040f;
}
.app > .cabinet .controls .stop-btn {background:radial-gradient(circle at 35% 22%,#ffad9e,#f30a18 60%,#8f071b) !important;color:white !important;}
.app > .cabinet .controls .bet-btn {background:radial-gradient(circle at 36% 16%,#fffda6,#ffac00 65%,#965700) !important;color:#3a1b10 !important;}
.app > .cabinet .controls .lever {background:radial-gradient(circle at 35% 22%,#b4dfff,#2567bc 63%,#111659) !important;color:white !important;}
.app > .cabinet .controls button:disabled {opacity:.48;}
.app > .cabinet .counter-row {
  display:flex; gap:clamp(20px, 7vw, 80px); justify-content:center;
  max-width:570px; margin:0 auto;
}
.app > .cabinet .counter {
  background:#15060d;
  padding:4px clamp(12px,3vw,24px);
  min-width:100px; border:2px solid #ca8524;border-radius:10px;
}
.app > .cabinet .counter-label {color:#ffca47;font-weight:800;}
.app > .cabinet .counter-value {color:#ff3f3f;text-shadow:0 0 12px #d91f29;}
.app > .cabinet .win-banner {color:#ffe2a2;}
@media (max-width: 460px) {
 .app > .cabinet {padding-inline: 4px;}
 .app > .cabinet::before {max-height:25dvh;}
 .app > .cabinet .reels {max-width:100%;padding:2px;gap:2px;}
 .app > .cabinet .reel {width:clamp(82px,25vw,110px);--cell-h:clamp(51px,17vw,73px);}
 .app > .cabinet .counter-value {font-size:24px;}
}
@media (prefers-reduced-motion:reduce){.app > .cabinet {scroll-behavior:auto;}}

/* A machine must not accept the first BET before managed settings sync. */
html:not([data-circus-config-revision]) .app > .cabinet .controls {
  pointer-events:none; opacity:.55;
}