* { box-sizing: border-box; margin: 0; }
body {
  background: #0c3c1e; color: #f0f0eb;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
}
main { display: flex; min-height: 100vh; }
#cam-panel { flex: 1.2; display: flex; flex-direction: column; background: #082816; padding: 10px; }
#video-wrap { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; }
#video { max-width: 100%; max-height: 78vh; }
#overlay { position: absolute; left: 0; top: 0; pointer-events: none; }
#zone-labels { display: none; }
#cam-controls { display: flex; gap: 12px; align-items: center; padding-top: 8px; color: #969b96; font-size: 14px; }
#cam-controls select, #cam-controls input { accent-color: #e6be5a; }
#perf { margin-left: auto; }

#advice-panel { flex: 1; padding: 4vh 4vw; display: flex; flex-direction: column; gap: 2.4vh; }
.hands { font-size: clamp(18px, 2.6vh, 26px); line-height: 1.6; }
#action {
  font-size: clamp(56px, 13vh, 130px); font-weight: 900; text-align: center;
  letter-spacing: 2px; margin: 1vh 0; color: #969b96;
}
#action.HIT { color: #6ec86e; } #action.STAND { color: #dc5a50; }
#action.DOUBLE { color: #e6be5a; } #action.SPLIT { color: #6eaaf0; }
#action.SURRENDER { color: #c88cdc; }
#action.BLACKJACK, #action.BUST { color: #e6be5a; }
#count-line { font-size: clamp(20px, 3vh, 30px); color: #e6be5a; }
#count-sub { color: #f0f0eb; opacity: .85; margin-top: 4px; }
#status { min-height: 1.4em; color: #dc5a50; }
.buttons { display: flex; gap: 10px; }
button {
  background: #14501e; color: #f0f0eb; border: 1px solid #2a7a3a; border-radius: 8px;
  padding: 10px 18px; font-size: 16px; cursor: pointer;
}
button:hover { background: #1a6428; }
#rules-box { color: #c8ccc8; font-size: 14px; }
#rules-box label { display: inline-flex; gap: 6px; align-items: center; margin: 8px 12px 0 0; }
footer { margin-top: auto; font-size: 12px; color: #969b96; line-height: 1.5; }
footer a { color: #6eaaf0; }
#loading {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: #0c3c1e; font-size: 24px; z-index: 10;
}
#loading.hidden { display: none; }
@media (max-width: 900px) {
  main { flex-direction: column; }
  #video { max-height: 45vh; }
  #advice-panel { padding: 2vh 5vw; }
}