.c4-shell { padding: 14px 0 0; }

.c4-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.c4-route-help { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--c4-muted); }

.c4-routes { display: flex; gap: 4px; border: 0; margin: 0; padding: 0; min-width: 0; }

.connect4-demo button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.connect4-demo button:focus-visible { outline: 3px solid var(--c4-focus); outline-offset: 3px; }

.connect4-demo button:disabled { cursor: default; }

.c4-route { font-size: 12px !important; font-weight: 650 !important; border: 1px solid #bac5d4; padding: 7px 9px; border-radius: 6px; background: transparent; color: var(--c4-muted); line-height: 1.35; min-height: 32px; white-space: nowrap; }

.c4-route-active { color: #065f46; border-color: #a7d7c8; background: #e8f8f1; }

.c4-route:disabled { border-style: dashed; color: #67758b; }

.c4-restart { flex: none; color: var(--c4-ink); background: #fff; border: 1px solid #bac5d4; border-radius: 6px; padding: 6px 11px; font-size: 12px !important; font-weight: 650 !important; min-height: 34px; }

.c4-restart:hover { border-color: var(--c4-ink); background: #eff3f9; }

.c4-players { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 16px 0 2px; }

.c4-player { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }

.c4-player::before { content: ''; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c4-amber); border: 1px solid #9d7420; }

.c4-player-opponent::before { background: var(--c4-coral); border-color: #b74247; }

.c4-status { font-size: clamp(17px, 3vw, 23px); font-weight: 750; letter-spacing: -.025em; margin: 9px 0 11px; line-height: 1.2; min-height: 1.2em; }

.c4-cabinet { padding: 13px 14px 15px; border-radius: 16px 16px 12px 12px; background: var(--c4-blue); border-bottom: 7px solid var(--c4-blue-edge); box-shadow: 0 12px 18px -13px #152b6f; color: #fff; }

.c4-provider { display: table; max-width: 100%; margin: 0 0 10px; padding: 5px 8px; background: #102661; border: 1px solid #6684ed; border-radius: 5px; color: #e9f1ff; font-size: 12px; line-height: 1.45; font-weight: 650; overflow-wrap: anywhere; }

.c4-provider[data-source='jev'] { background: #e2ffef; color: #075636; border-color: #b3efd1; }

.c4-provider[data-source='openjev'] { background: var(--oj-bg); color: var(--oj); border-color: #cbd5e1; }

.c4-provider[data-source='code'] { background: #fff0ce; color: #694700; border-color: #ffdc8f; }

.c4-drops, .c4-board, .c4-probability-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }

.c4-drops { margin: 0 0 8px; }

.c4-drop { border: 1px solid #849cef; border-radius: 8px 8px 4px 4px; background: #3159d3; color: #fff; min-height: 44px; padding: 4px 0; font-weight: 700 !important; font-size: 16px !important; transition: transform 120ms, background 120ms; }

.c4-drop::after { content: '↓'; display: block; line-height: 1; font-size: 13px; color: var(--c4-amber); }

.c4-drop:hover:not(:disabled) { background: #16369a; transform: translateY(2px); }

.c4-drop:active:not(:disabled) { transform: translateY(4px); background: #102661; }

.connect4-demo .c4-drop:focus-visible { outline-color: var(--c4-amber); outline-offset: 2px; }

.c4-drop:disabled { color: #aabbee; border-color: #4e70d6; background: #2446b2; }

.c4-drop:disabled::after { color: #8da4e8; }

.c4-board { gap: 8px; }

.c4-cell { border: 0; padding: 0; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border-radius: 50%; background: var(--c4-well); box-shadow: inset 0 3px 5px #091838, 0 1px 0 #7390ed; color: #1b2a50; font-size: clamp(18px, 4.5vw, 36px); font-weight: 800; line-height: 1; }

.c4-cell[data-player='X'] { background: var(--c4-amber); color: #664300; box-shadow: inset 0 -4px 0 #d99a22, inset 0 3px 0 #ffe9a1, 0 2px 3px #112464; }

.c4-cell[data-player='O'] { background: var(--c4-coral); color: #73242d; box-shadow: inset 0 -4px 0 #d75459, inset 0 3px 0 #ffb1a8, 0 2px 3px #112464; }

.c4-cell.c4-cell-winning { outline: 3px solid #fff; outline-offset: -6px; }

.c4-cell-new { animation: c4-drop-in 180ms cubic-bezier(.2,.7,.25,1) both; }

.c4-probabilities { margin-top: 13px; padding-top: 10px; border-top: 1px solid #6a86df; }

.c4-probabilities[hidden] { display: none; }

.c4-probability-title { margin: 0 0 7px; font-size: 12px; font-weight: 650; color: #f2f5ff; }

.c4-probability { display: flex; flex-direction: column; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }

.c4-probability-value { font-size: 12px; font-weight: 700; }

.c4-probability-track { display: block; position: relative; width: 100%; max-width: 27px; height: 34px; background: #193ca8; border-radius: 3px 3px 0 0; overflow: hidden; }

.c4-probability-fill { position: absolute; inset: 0; display: block; background: #a4b9f7; transform: scaleY(0); transform-origin: bottom; }

.c4-probability-picked .c4-probability-fill { background: var(--c4-coral); }

.c4-probability-picked .c4-probability-value { color: #ffe0dc; }

.c4-probability-column { font-size: 12px; color: #e0e7ff; }

.c4-probability-note { margin: 7px 0 0; color: #e0e7ff; font-size: 12px; line-height: 1.4; }

.c4-notice { font-size: 12px; line-height: 1.45; color: var(--c4-muted); margin: 14px 0 10px; }

.c4-notice-warning { color: #86500b; }

.c4-history { border: 0; border-top: 1px solid #cad3df; border-radius: 0; background: transparent; margin: 0; }

.c4-history summary { padding: 12px 0; font-size: 12px; font-weight: 600; }

.c4-history-body { font-size: 12px; color: var(--c4-muted); padding: 0 0 12px; }

.c4-history-body p { margin: 0 0 10px; }

.c4-history-list { padding-left: 23px; margin: 0; }

.c4-history-move { padding: 8px 0; border-top: 1px solid #e0e5ed; }

.c4-history-move strong { color: var(--c4-ink); display: block; }

.c4-history-source { display: block; color: var(--c4-ink); font-size: 12px; font-weight: 650; }

.c4-history-metadata { display: block; margin-top: 3px; font-size: 12px; overflow-wrap: anywhere; }

.c4-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; }