/* Baccarat Scorecard Tracker — Light Theme */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; background: #fff; color: #333; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* Header */
header { display: flex; align-items: center; justify-content: space-between; height: 38px; background: #f5f5f5; padding: 0 12px; border-bottom: 1px solid #ddd; flex-shrink: 0; }
header .title { font-size: 11px; font-weight: bold; color: #333; letter-spacing: 0.5px; }
header .info { font-size: 9px; color: #888; }

/* Layout */
#app { display: flex; flex: 1; overflow: hidden; }
#scorecard-wrap { flex: 1; overflow-y: auto; overflow-x: auto; padding: 6px 0 6px 6px; }
#scorecard { display: block; }

/* Controls panel */
#controls { width: 270px; min-width: 270px; background: #fafafa; overflow-y: auto; padding: 0 0 16px 0; border-left: 1px solid #eee; flex-shrink: 0; }

.section-label { font-size: 8px; font-weight: bold; color: #888; letter-spacing: 1px; padding: 12px 12px 4px; }
.divider { height: 1px; background: #ddd; margin: 8px 12px; }

/* Buttons */
.btn { display: block; width: calc(100% - 24px); margin: 0 12px 3px; padding: 7px 0; border: none; border-radius: 4px; font-size: 10px; font-weight: bold; cursor: pointer; text-align: center; transition: opacity 0.15s; }
.btn:hover { opacity: 0.85; }
.btn:active { opacity: 0.7; }
.btn-deal { background: #4a7c4f; color: #fff; font-size: 12px; padding: 10px 0; }
.btn-secondary { background: #e0e0e0; color: #555; }
.btn-p { background: #2563eb; color: #fff; }
.btn-b { background: #dc2626; color: #fff; }
.btn-t { background: #16a34a; color: #fff; }
.btn-danger-light { background: #fce4e4; color: #c0392b; }
.btn-warn { background: #fff3cd; color: #856404; margin-top: 8px; }

.btn-row { display: flex; gap: 4px; padding: 0 12px; margin-bottom: 3px; }
.btn-row .btn { flex: 1; margin: 0; padding: 6px 0; }

/* Info rows */
.info-row { display: flex; justify-content: space-between; align-items: center; padding: 2px 12px; }
.info-row .label { font-size: 9px; color: #888; }
.info-row .value { font-size: 10px; font-weight: bold; color: #333; }
.info-row .value.accent { color: #2563eb; }

/* Switch spinner */
.sw-btn { width: 22px; height: 22px; border: 1px solid #ccc; background: #fff; border-radius: 3px; cursor: pointer; font-size: 14px; line-height: 20px; text-align: center; }
.sw-btn:hover { background: #f0f0f0; }
#sw-val { display: inline-block; width: 22px; text-align: center; font-size: 11px; font-weight: bold; }

/* Last hand box */
.last-hand-box { margin: 0 12px; padding: 6px 8px; background: #fff; border: 1px solid #ddd; border-radius: 4px; }
.lh-line { font-family: Consolas, monospace; font-size: 9px; padding: 1px 0; }
.lh-winner { font-size: 10px; font-weight: bold; text-align: center; padding: 3px 0 0; color: #333; }

/* Scrollbar styling */
#scorecard-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
#scorecard-wrap::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
#controls::-webkit-scrollbar { width: 6px; }
#controls::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }