/* Dealer payout trainer (2.6.17) */
.dpt-games, .dpt-levels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dpt-q { margin: 12px 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--c-line); background: rgba(255,255,255,.03); font-size: 17px; line-height: 1.5; min-height: 96px; }
.dpt-q h3 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); }
.dpt-q ul { margin: 6px 0 0; padding-left: 20px; }
.dpt-q .dpt-big { font-size: 26px; font-weight: 800; color: var(--c-accent); }
.dpt-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; } /* 1.1.1: the Check button stays inside the panel on phones */
.dpt-in .cc-btn { flex: none; }
.dpt-lab { font-size: 13px; color: var(--c-muted); }
.dpt-in { display: flex; gap: 8px; }
.dpt-in input { flex: 1; min-height: 48px; font-size: 22px; font-weight: 800; padding: 4px 12px; min-width: 0; }
.dpt-fb { margin: 10px 0; min-height: 24px; font-size: 15px; }
.dpt-fb b { font-size: 18px; }
.dpt-fb.is-ok b { color: var(--c-accent); }
.dpt-fb.is-bad b { color: #fb923c; }
.dpt-fb small { display: block; color: var(--c-muted); margin-top: 4px; font-size: 13px; }
/* 1.1.1: design system v2 (A+B): game and level pickers as recessed pill tracks */
.ccc[data-ds="2"] .dpt-games, .ccc[data-ds="2"] .dpt-levels { display: flex !important; flex-wrap: wrap; gap: 2px; padding: 4px !important; margin: 0 0 10px !important; border: 0 !important; border-radius: 20px; background: rgba(0,0,0,.25) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); min-height: 0; }
.ccc[data-ds="2"] .dpt-games button, .ccc[data-ds="2"] .dpt-levels button { flex: 1 1 auto; min-height: 34px; padding: 0 14px; border: 0 !important; border-radius: 999px; background: none !important; color: var(--c-muted) !important; font-weight: 500; box-shadow: none !important; }
.ccc[data-ds="2"] .dpt-games button.is-on, .ccc[data-ds="2"] .dpt-levels button.is-on { background: rgba(255,255,255,.14) !important; color: var(--text, #e7eaf0) !important; box-shadow: 0 1px 3px rgba(0,0,0,.5) !important; }
.ccc[data-ds="2"] .dpt-in input { border: 0; border-radius: 12px; background: rgba(0,0,0,.25); box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }