/* Keep the original game layout, with CAS branding and an explicit virtual balance. */
body.cas-demo { margin: 0; height: 100dvh; min-height: 0; overflow: hidden; background: #101513; }
body.cas-demo #shell { height: 100dvh; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr); }
.cas-demo #view { padding-bottom: 0; min-width: 0; }
.cas-demo .demo-notice { display: flex; align-items: center; gap: 13px; min-height: 42px; padding: 7px 22px; background: #19231b; border-bottom: 1px solid #d9b67925; color: #c6d0c1; font: 400 11px/1.6 'Hanken Grotesk', system-ui, sans-serif; }
.demo-label { flex: none; padding: 2px 7px; border: 1px solid #d9b67965; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: .1em; color: #d9b679; }
.demo-brand { margin-left: auto; flex: none; }
.demo-brand img { width: 78px; height: auto; display: block; }
.cas-demo .shell-header { min-height: 65px; gap: 12px; padding: 10px 22px; background: #101513; border-bottom: 1px solid #d9b67925; flex-wrap: nowrap; }
.cas-demo .shell-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 16px/1.3 'Hanken Grotesk', sans-serif; }
.cas-demo .wallet { margin-left: auto; }
.cas-demo .wallet > span { font-size: 10px; color: #abb8a5; }
.cas-demo .wallet > b { color: #eed1a0; font: 600 18px/1.4 'Hanken Grotesk', sans-serif; }
.cas-demo .demo-refill { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; white-space: nowrap; font-size: 12px; }
.demo-refill > span:first-child { font-size: 20px; font-weight: 400; }
.demo-refill:disabled { opacity: .4; cursor: wait; }
.cas-demo [hidden] { display: none !important; }
.cas-demo #play-exit { font-size: 12px; min-height: 40px; padding-inline: 13px; white-space: nowrap; }
.demo-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.demo-error { max-width: 480px; margin: 12vh auto; padding: 25px; color: #c6d0c1; text-align: center; font-family: 'Hanken Grotesk', sans-serif; }
.demo-error h1 { color: #f6f2e9; font-size: 27px; line-height: 1.25; }
.demo-error p { line-height: 1.8; margin-block: 18px 25px; }
.demo-error a, .demo-no-script a { display: inline-block; padding: 12px 20px; background: #d9b679; color: #101513; border-radius: 4px; text-decoration: none; font-weight: 600; }
.demo-no-script { position: fixed; inset: 110px 20px auto; background: #19231b; padding: 25px; text-align: center; z-index: 10; }
.demo-no-script a { display: block; width: fit-content; margin: 16px auto 0; }
.cas-demo :focus-visible { outline: 2px solid #d9b679; outline-offset: 3px; }
@media (max-width: 720px) {
  .cas-demo .demo-notice { min-height: 35px; font-size: 10px; gap: 8px; padding: 6px 12px; }
  .demo-brand { display: none; }
  .cas-demo .shell-header { padding: 8px 10px; gap: 8px; min-height: 62px; }
  .cas-demo .shell-title { font-size: 12px; max-width: 30vw; }
  .cas-demo .wallet { min-width: 49px; }
  .cas-demo .wallet > span { display: block; font-size: 8px; letter-spacing: 0; }
  .cas-demo .wallet > b { font-size: 15px; }
  .cas-demo #play-exit { width: 37px; justify-content: center; min-width: 37px; padding: 0; font-size: 23px; }
  #play-exit > span { display: none; }
  .cas-demo .demo-refill { width: 37px; min-width: 37px; padding: 0; min-height: 38px; }
  .demo-refill > span:last-child { display: none; }
  .cas-demo .icon-btn { width: 37px; min-width: 37px; height: 38px; }
}
@media (max-width: 350px) {
  .cas-demo .shell-header { padding-inline: 7px; gap: 5px; }
  .cas-demo .shell-title { max-width: 27vw; font-size: 11px; }
  .cas-demo .demo-notice { font-size: 9px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .cas-demo .demo-notice { min-height: 26px; padding-block: 3px; font-size: 9px; }
  .cas-demo .shell-header { min-height: 50px; padding-block: 5px; }
}