/* Steero web cockpit (D32): the card around a short Your turn round. Loads after base.css.
   The deck keeps CockpitView's dark colours in both modes, like the app. */
.ck { position: relative; display: grid; gap: 10px; padding: 14px; border-radius: 34px; outline: none;
  background: var(--ck-card, rgba(255, 255, 255, .55)); border: 1px solid var(--ck-edge, rgba(255, 255, 255, .7));
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 30px 80px -20px rgba(20, 60, 35, .35); color: var(--ck-ink, #12301E); }
@media (prefers-color-scheme: dark) { .ck { --ck-card: rgba(22, 26, 34, .72); --ck-edge: rgba(255, 255, 255, .12); --ck-ink: #F5F5F7; } }
.ck-head { display: flex; align-items: flex-start; gap: 12px; min-height: 62px; padding: 4px 6px 0; }
.ck-line { flex: 1; min-width: 0; }
.ck-line small { display: block; font-size: 12px; font-weight: 600; opacity: .7; }
.ck-examiner { font-weight: 700; font-size: 18px; letter-spacing: -.02em; line-height: 1.25; }
.ck-situation { font-size: 14px; opacity: .8; margin-top: 2px; line-height: 1.35; }
.ck-dots { display: flex; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.ck-dots li { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, currentColor 18%, transparent); transition: background-color .3s, transform .3s; }
.ck-dots li.now { background: var(--action); transform: scale(1.25); }
.ck-dots li.right { background: var(--caught); }
.ck-dots li.miss { background: var(--skipped); }
.ck-callout { width: min(100%, 360px); margin: 0 auto; text-align: left; font-size: 14px; line-height: 1.4; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--action) 12%, transparent); }

.ck-scene { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 5 / 3; background: #8BC97A; touch-action: none; }
.ck-art, .ck-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ck-you { transition: transform 1.1s var(--ease-ios); }
.ck-scene.is-moved .ck-you { transform: translateY(-70px); }
.ck-lamp { opacity: 0; }
.ck-scene[data-signal="left"] .ck-lamp-l, .ck-scene[data-signal="right"] .ck-lamp-r, .ck-scene[data-signal="both"] .ck-lamp { animation: blink .9s steps(1) infinite; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } }
.ck-intro { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; color: #fff;
  background: linear-gradient(rgba(10, 30, 20, .05), rgba(10, 30, 20, .45)); }
.ck-intro[hidden] { display: none; }
.ck-intro p { font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 99px; background: rgba(10, 20, 15, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ck-start { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--action); color: #fff; font-weight: 700; font-size: 18px; box-shadow: 0 12px 30px -8px rgba(20, 60, 140, .6); }
.ck-start::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff; box-sizing: border-box;
  background: radial-gradient(circle, #fff 0 3px, transparent 3.5px); }
.ck-slots { position: absolute; inset: 0; pointer-events: none; }
.ck-slot { position: absolute; translate: -50% -50%; width: 52px; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; opacity: 0; transition: opacity .2s; }
.ck-scene.has-slots .ck-slot { opacity: .35; }
.ck[data-phase="ask"] .ck-slot.is-near, .ck-slot.is-right, .ck-slot:focus-visible { opacity: 1; }
.ck-slot svg { width: 100%; height: 100%; }
.ck-slot span { position: absolute; left: 50%; top: 100%; translate: -50% 0; white-space: nowrap; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .55); padding: 3px 7px; border-radius: 99px; }
/* One label at a time: only the place you're on (D34). Side by side they overlapped and read as one line. */
.ck-slot span { opacity: 0; transition: opacity .15s; }
.ck[data-phase="ask"] .ck-slot.is-near span, .ck-slot.is-right span, .ck-slot:focus-visible span { opacity: 1; }
.ck-slot.is-right span { background: var(--caught); }
.ck:not([data-phase="ask"]) .ck-slot { pointer-events: none; }

.ck-bar { display: flex; align-items: center; gap: 10px; padding: 0 4px; font-size: 13px; font-weight: 700; min-height: 18px; }
.ck-clock { position: relative; flex: 1; height: 8px; border-radius: 99px; background: color-mix(in srgb, currentColor 14%, transparent); overflow: hidden; }
.ck-clock i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; background: var(--sign); }
.ck-clock i.late { background: #E5484D; }
.ck-time { min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.ck[data-phase="intro"] .ck-bar, .ck[data-phase="result"] .ck-bar { visibility: hidden; }

.ck-deck { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 8 / 5; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); background: #111316; }
.ck-deck-svg { width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.ck-hit { fill: transparent; }
.ck[data-phase="ask"] [data-ctl] { cursor: pointer; }
.ck[data-phase="ask"] .ck-wheel { cursor: grab; }
.ck-wheel.is-grab { cursor: grabbing; }
.ck-wheel-rot { transform-box: view-box; transform-origin: 140px 168px; transition: transform .45s var(--spring-snappy); }
.ck-wheel.is-grab .ck-wheel-rot { transition: none; }
.ck-rim { stroke: #2F343B; transition: stroke .25s; }
.ck-wheel-glow { opacity: 0; transition: opacity .25s; }
.ck-wheel.is-grab .ck-rim, .ck-wheel.is-show .ck-rim { stroke: #47C878; }
.ck-wheel.is-grab .ck-wheel-glow, .ck-wheel.is-show .ck-wheel-glow { opacity: .85; }
.ck-stalk-arm { transform-box: view-box; transform-origin: 84px 166px; transition: transform .3s var(--spring-snappy); }
.ck-knob { fill: #3A3F47; transition: fill .2s; }
.ck-stalk.is-show .ck-knob, .ck[data-phase="ask"] .ck-stalk:hover .ck-knob { fill: #2F8F55; }
.ck-tiny { font: 700 9px -apple-system, system-ui, sans-serif; fill: #8E96A1; text-anchor: middle; }
.ck-ind path { fill: #2C3A2F; transition: fill .2s; }
.ck-ind.is-on path { fill: #3FCB72; animation: blink .9s steps(1) infinite; }
.ck-face { fill: #33383F; transition: fill .2s; }
.ck-btn.is-on .ck-face, .ck-btn.is-show .ck-face { fill: #4A5059; }
.ck-pb-ring { stroke: #C8D0DA; }
.ck-pb-p { font: 700 13px -apple-system, system-ui, sans-serif; fill: #C8D0DA; }
.ck-pbrake.is-on .ck-pb-ring { stroke: #FF453A; } .ck-pbrake.is-on .ck-pb-p { fill: #FF453A; }
.ck-press { transition: transform .15s; }
.ck-pedal.is-down .ck-press { transform: translateY(5px); }
.ck-fill { fill: rgba(63, 203, 114, .55); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.ck-label { font: 700 10px -apple-system, system-ui, sans-serif; letter-spacing: 1.5px; fill: #8E96A1; }
.ck-pedal.is-show .ck-pedal-face, .ck-pedal.is-down .ck-pedal-face { stroke: #3FCB72; stroke-width: 3; }
.ck-gear text { font: 700 14px -apple-system, system-ui, sans-serif; fill: #C8D0DA; }
.ck-gear-on { fill: transparent; transition: fill .2s; }
.ck-gear.is-on .ck-gear-on { fill: #F2F3F5; } .ck-gear.is-on text { fill: #111316; }
.ck-gear.is-show .ck-gear-on { fill: #3FCB72; } .ck-gear.is-show text { fill: #fff; }
.ck .is-show { animation: show 1.1s ease-in-out infinite alternate; }
@keyframes show { to { opacity: .55; } }

/* After an answer: over the scene, so the deck below still shows the right control. A short beat first,
   so a right answer's move plays out on the road. */
.ck-feedback { position: absolute; inset: 0; z-index: 2; padding: 16px 20px; align-content: center; background: rgba(20, 24, 30, .9); color: #F5F5F7;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; gap: 4px; animation: up .45s .65s var(--spring-smooth) both; }
.ck-feedback[hidden] { display: none; }
@keyframes up { from { transform: translateY(24px); opacity: 0; } }
.ck-verdict { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; }
.ck-verdict i { width: 20px; height: 20px; border-radius: 50%; background: var(--caught); position: relative; }
.ck-verdict i.no { background: #E5484D; }
.ck-verdict i::after { content: ""; position: absolute; inset: 0; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.ck-verdict i.no::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 8.5l7 7m0-7l-7 7' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 8.5l7 7m0-7l-7 7' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ck-right { font-size: 16px; line-height: 1.35; }
.ck-trick { font-size: 13px; color: rgba(245, 245, 247, .7); line-height: 1.35; }
.ck-trick b { color: var(--sign); margin-right: 4px; }
.ck-next { justify-self: start; margin-top: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--action); color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; }

.ck-result { position: absolute; inset: 0; z-index: 3; display: grid; align-content: center; gap: 12px; padding: 28px; border-radius: inherit; text-align: center;
  background: var(--ck-result, #F7FAF5); animation: up .5s var(--spring-smooth) both; }
@media (prefers-color-scheme: dark) { .ck-result { --ck-result: #141A24; } }
.ck-result[hidden] { display: none; }
.ck-score { font-size: 20px; font-weight: 600; }
.ck-score b { display: block; font-size: clamp(48px, 7vw, 64px); line-height: 1; letter-spacing: -.04em; font-weight: 800; }
.ck-score-sub { opacity: .75; max-width: 34ch; margin: 0 auto; }
.ck-list { list-style: none; margin: 4px auto 0; padding: 0; display: grid; gap: 6px; width: min(100%, 360px); text-align: left; }
.ck-list li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, currentColor 6%, transparent); font-size: 15px; font-weight: 600; }
.ck-list i { width: 18px; height: 18px; border-radius: 50%; background: var(--caught); }
.ck-list li.miss i { background: var(--skipped); }
.ck-list small { font-weight: 600; opacity: .65; }
.ck-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.ck-actions .placard, .ck-actions .btn-soft { min-height: 48px; height: auto; font-size: 16px; border-radius: 999px; }

.ck-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 0 6px 2px; font-size: 13px; }
.ck-more { border: 0; background: none; padding: 6px 0; font: inherit; color: inherit; opacity: .8; cursor: pointer; }
.ck-more b { font-weight: 700; }
.ck-alt summary { cursor: pointer; opacity: .8; padding: 6px 0; list-style: none; }
.ck-alt summary::-webkit-details-marker { display: none; }
.ck-alt summary::after { content: " ›"; }
.ck-alt[open] { flex-basis: 100%; order: 3; }
.ck-alt-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 4px; }
.ck-alt-list button { min-height: 36px; padding: 0 12px; border-radius: 99px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: transparent; color: inherit; font: 600 13px/1 -apple-system, system-ui, sans-serif; cursor: pointer; }
.ck-keys { margin-left: auto; opacity: .6; }
@media (hover: none), (max-width: 640px) { .ck-keys { display: none; } }
@media (max-width: 520px) {
  .ck { padding: 10px; border-radius: 28px; gap: 8px; }
  .ck-feedback { padding: 10px 14px; } .ck-trick { display: none; } .ck-next { margin-top: 4px; }
  .ck-examiner { font-size: 16px; }
  .ck-feedback { padding: 12px 14px; }
  .ck-right { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .ck-you, .ck-wheel-rot, .ck-stalk-arm { transition: none; } .ck .is-show { animation: none; } }