/* Shared dimensions keep the live window unchanged when switching layouts. */
.app-shell {
  --broadcast-height: clamp(400px, calc(35vh + 100px), 434px);
  --live-panel-height: calc(var(--broadcast-height) + 160px);
  padding-top: 10px;
}
.topbar { min-height: 72px; justify-content: flex-start; gap: 24px; padding-top: 8px; padding-bottom: 8px; }
.topbar > .hall-select { flex: none; }
.topbar nav { margin-left: auto; gap: 24px; }
.topbar nav a.active::after { bottom: -8px; }
.topbar .account { margin-left: auto; }
.game-heading { justify-content: flex-start; gap: 22px; }
.game-heading h1 { font-size: 23px; margin-top: 0; }
.game-heading .eyebrow { font-size: 8px; line-height: 1.4; }
.game-heading h1 span { margin-left: 12px; font-size: 11px; }
.game-tools { gap: 12px; }
.layout-switch button { padding: 6px 14px; }
.preview-note { padding: 4px 0 7px; }
.bet-shortcut {
  display: none; align-items: center; gap: 12px; margin-left: auto;
  border: 1px solid #d99652; border-radius: 6px;
  background: #ffdaacb8; color: #744619; padding: 7px 13px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
body.layout-basic .bet-shortcut { display: inline-flex; }
.play-grid, body.layout-basic .play-grid {
  grid-template-columns: minmax(0, 2.4fr) minmax(400px, 1fr);
  align-items: start; gap: 12px;
}
.live-panel, body.layout-basic .live-panel { min-height: 0; }
body:not(.live-only) .broadcast {
  height: var(--broadcast-height); min-height: 0;
  flex: 0 0 var(--broadcast-height);
}
.live-heading { min-height: 54px; padding: 8px 16px; }
.live-heading h2 { font-size: 14px; line-height: 20px; }
.live-heading > div > small { margin-top: 1px; line-height: 14px; }
.live-controls { min-height: 44px; padding: 6px 14px; }
.last-result { min-height: 56px; padding: 9px 14px; }
.bet-heading { padding: 9px 16px; }
.market-tabs button { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
.selection-body { flex: none; padding: 7px 16px 2px; }
.play-note { margin-bottom: 5px; }
.positions { margin-bottom: 6px; }
.choice-toolbar { margin-bottom: 5px; }
.choices { gap: 6px; }
.choices.attributes, .choices.dragon { min-height: 88px; }
.picked-row { min-height: 28px; margin-top: 2px; }
.bet-footer { padding: 8px 16px 6px; }
.bet-footer > p { padding-top: 4px; }
.stake-note { margin: 6px 0; }
body.layout-basic .history-panel {
  height: var(--live-panel-height); display: flex; flex-direction: column;
}
body.layout-basic .history-scroll { height: auto; min-height: 0; flex: 1; overflow-y: auto; }
body.layout-basic .history-group { flex-basis: 100%; }
body.layout-basic .history-row { min-height: 30px; padding: 3px 10px; }
body.layout-basic .history-row .balls { flex: 1; justify-content: space-between; gap: 4px; }
body.layout-basic .history-row .ball, body.layout-basic .history-row .attr { width: 24px; height: 24px; }
.history-panel > .panel-heading { padding: 8px 14px; flex-wrap: wrap; gap: 5px 12px; }
.history-tabs { gap: 4px; }
.history-tabs button {
  min-width: 58px; min-height: 40px; padding: 8px 13px;
  font-size: 14px; font-weight: 650; color: #4d7187;
  border: 1px solid #cddfe8; background: #f6fbfd;
}
.history-tabs button.active { background: #1d7199; border-color: #1d7199; color: #fff; }
.history-scroll { padding-top: 8px; padding-bottom: 8px; }
body.layout-basic .tickets-panel { min-height: 350px; }

/* Verification is an in-page disclosure beside the existing camera controls. */
.live-actions #verifyButton[aria-expanded="true"] { color: #ffd29b; }
.live-verification { padding: 14px 16px; background: linear-gradient(125deg, #eaf4f9, #f9f2e6); border-bottom: 1px solid #cddfe7; }
.verification-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.verification-heading h3 { font-size: 15px; }
.verification-heading p { color: #5b7b8e; font-size: 11px; margin-top: 2px; }
.verification-heading > button { flex: none; padding: 7px 10px; font-size: 12px; border: 1px solid #c4d9e4; border-radius: 6px; background: #ffffff80; }
.live-verification .verification-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; }
.live-verification .emoji-editor { min-width: 0; }
.live-verification .emoji-editor > label { font-size: 12px; }
.live-verification .emoji-editor > label small { color: #648193; }
.live-verification .emoji-options { gap: 5px; margin: 8px 0; }
.live-verification .emoji-options button { min-width: 0; min-height: 38px; flex: 1; }
.live-verification .emoji-sequence { min-height: 49px; padding: 7px 9px; color: #597e93; background: #ffffff80; }
.live-verification .emoji-sequence.has-sequence { font-size: 21px; }
.live-verification .emoji-actions { margin: 5px 0 8px; }
.live-verification .emoji-actions button { min-height: 28px; }
.live-verification .emoji-editor > p { color: #5d7c8c; margin-top: 7px; }
.live-verification .verification-scene { min-height: 250px; }
.live-verification .physical-screen { left: 18px; right: 14px; bottom: 14px; padding: 10px; }

@media (min-width: 1201px) {
  body.layout-basic .choices:not(.attributes):not(.dragon):not(.sum-numbers) { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
  body.layout-basic .bet-footer {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas: "stake actions" "summary notice"; gap: 2px 16px;
  }
  body.layout-basic .stake-row { grid-area: stake; gap: 7px; }
  body.layout-basic .stake-input { flex-basis: 90px; }
  body.layout-basic .chips button { padding-left: 8px; padding-right: 8px; }
  body.layout-basic .stake-note { grid-area: summary; }
  body.layout-basic .bet-actions { grid-area: actions; align-self: center; }
  body.layout-basic #betNotice { grid-area: notice; align-self: center; padding-top: 0; }
}
@media (max-width: 1350px) {
  .topbar { gap: 16px; }
  .topbar nav { gap: 15px; font-size: 12px; }
  .topbar .hall-select { font-size: 0; gap: 0; }
  .topbar .hall-select select { padding: 7px 20px 7px 8px; font-size: 11px; }
  .topbar .demo-pill { display: none; }
  .game-heading h1 span { display: none; }
}
@media (max-width: 1150px) {
  .topbar nav { display: none; }
  .game-heading { gap: 16px; }
  .live-verification { padding: 12px; }
  .live-verification .verification-layout { gap: 10px; }
  .live-verification .emoji-options button { font-size: 20px; padding: 2px; }
}
@media (max-width: 980px) {
  .app-shell { --broadcast-height: clamp(210px, 44vw, 300px); padding: 10px 15px 0; }
  .play-grid, body.layout-basic .play-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "live" "bet" "history" "tickets"; }
  .layout-switch { display: none; }
  .bet-shortcut { display: inline-flex; }
  .live-controls { justify-content: space-between; }
  .live-actions { flex: none; }
  .last-result { flex-wrap: nowrap; }
  .last-label { display: block; width: auto; }
  .last-label small { display: block; margin-top: 3px; }
  .last-balls { max-width: none; justify-content: flex-start; }
  body.layout-basic .history-panel { height: auto; }
  body.layout-basic .history-scroll { height: auto; }
  body.layout-basic .history-group { flex-basis: 367px; }
  body.layout-basic .history-row { min-height: 30px; }
  body.layout-basic .history-row .balls { justify-content: flex-start; gap: 5px; }
  body.layout-basic .history-row .ball, body.layout-basic .history-row .attr { width: 23px; height: 23px; }
  body.layout-basic .bet-panel .positions { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body.layout-basic .choices.sum-numbers { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .positions button { padding: 6px 1px; }
  .choices .choice { min-height: 68px; }
  .choices.attributes, .choices.dragon, body.layout-basic .choices.attributes, body.layout-basic .choices.dragon { min-height: 88px; }
  .history-panel > .panel-heading { padding: 9px 14px; }
}
@media (max-width: 600px) {
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; padding: 8px 13px; }
  .topbar .brand { grid-column: 1; grid-row: 1; }
  .topbar > .hall-select { grid-column: 1; grid-row: 2; justify-self: start; font-size: 11px; gap: 6px; }
  .topbar .hall-select select { padding-top: 4px; padding-bottom: 4px; }
  .topbar .account { display: contents; }
  .topbar .balance { grid-column: 2; grid-row: 1; padding: 0; border: 0; text-align: right; }
  .topbar .back-platform { grid-column: 2; grid-row: 2; text-align: right; }
  .topbar .brand { --height: 37px; }
  .game-heading { gap: 10px; }
  .game-heading h1 { font-size: 21px; }
  .game-tools { gap: 0; }
  .bet-shortcut { padding: 6px 9px; font-size: 11px; gap: 6px; }
  .preview-note { padding: 4px 0 7px; font-size: 9px; }
  .live-heading { padding-left: 12px; padding-right: 12px; }
  .live-controls { padding: 6px 10px; }
  .live-countdown { gap: 5px; }
  .live-countdown strong { font-size: 23px; }
  .last-result { padding: 9px 10px; gap: 7px; }
  .last-balls { gap: 3px; }
  .last-balls .ball { width: 23px; height: 23px; font-size: 10px; }
  .sum-result { display: none; }
  .selection-body { padding: 8px 13px 3px; }
  .bet-footer { padding: 9px 13px 7px; }
  .history-panel > .panel-heading { display: block; }
  .history-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 8px; gap: 6px; }
  .history-tabs button { min-width: 0; min-height: 42px; font-size: 14px; padding: 8px; }
  body.layout-basic .choices.sum-numbers { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .live-verification .verification-layout { grid-template-columns: 1fr; gap: 12px; }
  .live-verification .verification-scene { min-height: 220px; }
}
@media (max-width: 360px) {
  .topbar .brand { --height: 32px; }
  .game-heading { gap: 7px; }
  .game-heading h1 { font-size: 19px; }
  .game-heading .eyebrow { letter-spacing: 1.4px; }
  .bet-shortcut { font-size: 10px; padding: 6px; }
  .last-result { display: grid; }
  .last-label { display: flex; }
  .last-label small { margin-top: 0; }
  .last-balls { justify-content: space-between; }
}
body.live-only .live-panel { min-height: 100vh; }
body.live-only .broadcast { min-height: calc(100vh - 156px); flex: 1; }

/* Betting is the warm focal panel; the other panels retain their blue tint. */
.play-grid > .bet-panel { background: #fff3df; border-color: #efba76; box-shadow: 0 5px 20px #b87b2724; }
.bet-panel .bet-heading { background: linear-gradient(110deg, #f2b56b, #f9d5a1); border-color: #e5b77c; }
.bet-panel .bet-heading h2 { color: #68431f; }
.bet-panel .bet-heading #issue { color: #85663f; }
.bet-panel .market-tabs { background: #f5dfbf; border-color: #e9c89a; }
.bet-panel .market-tabs button { color: #8b6c47; }
.bet-panel .market-tabs button.active { background: #fff6e8; color: #724a25; }
.bet-panel .market-tabs button.active::after { background: #d97e30; }
.bet-panel .positions button { background: #fff8ed; border-color: #e6cfae; color: #887256; }
.bet-panel .positions button.active { background: #277fa5; border-color: #277fa5; color: white; }
.bet-panel .choice { background: linear-gradient(145deg, #fffcf6, #fff0d8); border-color: #e6cba4; }
.bet-panel .choice.selected { background: #d5eaf4; border-color: #2789b5; }
.bet-panel .quick-picks button { background: #fff8ed; border-color: #e8d2b3; color: #92704a; }
.bet-panel .bet-footer { background: linear-gradient(110deg, #f8dfbb, #fbe9d0); border-color: #e6c396; }
.bet-panel .play-note { color: #8b795f; }
.bet-panel .stake-note, .bet-panel #betNotice { color: #857050; }
.bet-panel .bet-actions .button-bet { background: linear-gradient(115deg, #fbb967, #ee9145); border-color: #dd8c41; color: #50371f; }
@media (min-width: 981px) {
  body:not(.layout-basic) .bet-heading { padding: 8px 12px; }
  body:not(.layout-basic) .market-tabs { padding: 0 3px; }
  body:not(.layout-basic) .market-tabs button { font-size: 14px; padding: 7px 4px; min-height: 38px; }
  body:not(.layout-basic) .selection-body { padding: 6px 12px 2px; }
  body:not(.layout-basic) .play-note { font-size: 10px; margin-bottom: 4px; }
  body:not(.layout-basic) .positions { gap: 4px; margin-bottom: 5px; }
  body:not(.layout-basic) .positions button { font-size: 12px; padding: 4px 1px; }
  body:not(.layout-basic) .choice-toolbar { min-height: 24px; margin-bottom: 4px; }
  body:not(.layout-basic) .quick-picks { gap: 3px; }
  body:not(.layout-basic) .quick-picks button { width: 25px; min-height: 24px; }
  body:not(.layout-basic) .choices { gap: 5px; }
  body:not(.layout-basic) .choices .choice { min-height: 55px; gap: 3px; }
  body:not(.layout-basic) .choice .ball { width: 29px; height: 29px; font-size: 13px; }
  body:not(.layout-basic) .choice small { font-size: 10px; }
  body:not(.layout-basic) .choices.sum-numbers { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body:not(.layout-basic) .choices.sum-numbers .choice { min-height: 44px; }
  body:not(.layout-basic) .picked-row { min-height: 25px; }
  body:not(.layout-basic) .bet-footer { padding: 7px 12px 5px; }
  body:not(.layout-basic) .stake-row { gap: 6px; }
  body:not(.layout-basic) .stake-input { flex-basis: 90px; }
  body:not(.layout-basic) .chips button { padding: 6px 8px; }
  body:not(.layout-basic) .stake-note { margin: 5px 0; }
  body:not(.layout-basic) .bet-actions { gap: 7px; }
  body:not(.layout-basic) .bet-actions button { min-height: 42px; padding: 8px 12px; }
  body:not(.layout-basic) .bet-footer > p { padding-top: 3px; font-size: 9px; }
}

.test-topup { padding: 4px 8px; border: 1px solid #c5a16c; border-radius: 5px; background: #ffefd9; color: #82562b; font-size: 11px; white-space: nowrap; }
#syncTest { font-size: 10px; padding: 4px 0; }
#syncTest.offline { color: #a35e32; }
#syncTest.offline i { background: #ca6b3a; }
.order-status.won { color: #248362; font-weight: 750; }
.order-status.lost { color: #8a96a0; }
.history-loading { padding: 28px; color: #6b8799; }
.round-result { position: fixed; right: 24px; bottom: 24px; z-index: 40; max-width: calc(100vw - 32px); display: flex; gap: 20px; background: #fff0d6; color: #6e4a21; border: 1px solid #d9a25b; border-radius: 12px; padding: 17px 20px; box-shadow: 0 8px 30px #123d563b; }
.round-result strong { font-size: 15px; }
.round-result p { font-size: 12px; margin-top: 4px; }
.round-result button { font-size: 24px; align-self: start; padding: 0 3px; }
@media (max-width: 700px) { .preview-note { flex-wrap: wrap; gap: 4px 8px; } .preview-note p { flex-basis: calc(100% - 30px); } #syncTest { display: flex; margin-left: auto; } .test-topup { margin-left: 20px; } .round-result { right: 16px; bottom: 16px; } }

/* Taller desktop live/betting row, with larger choices instead of empty space. */
@media (min-width: 981px) {
  .last-result { height: 60px; min-height: 60px; }
  body:not(.layout-basic) .bet-panel { height: var(--live-panel-height); }
  body:not(.layout-basic) .selection-body { flex: 1; display: flex; flex-direction: column; }
  body:not(.layout-basic) .selection-body > :not(.choices) { flex-shrink: 0; }
  body:not(.layout-basic) .choices { flex: 1; }
  body:not(.layout-basic) .choice .ball { width: 36px; height: 36px; font-size: 15px; }
  body:not(.layout-basic) .choice small { font-size: 11px; }
  body:not(.layout-basic) .choice .choice-label { font-size: 30px; }
  body:not(.layout-basic) .choices.sum-numbers .choice-label { font-size: 20px; }
}