/* ==========================================================================
   Smartphone Demo by CraftBook V6 — Frontend Stylesheet
   ========================================================================== */

/* ── Design tokens ──────────────────────────────────────────────────────── */

.cbd6-app {
    --cbd6-accent:     #00aaff;
    --cbd6-accent-glow:#00aaff33;

    /* Layout */
    --cbd6-topbar-h:  52px;
    --cbd6-footer-h:  46px;
    --cbd6-sidebar-w: 196px;
    --cbd6-panel-w:   230px;
    --cbd6-app-h:     580px;

    /* Radii */
    --cbd6-r-sm: 6px;
    --cbd6-r-md: 10px;
    --cbd6-r-lg: 16px;

    /* Transitions */
    --cbd6-t-fast:   120ms ease;
    --cbd6-t-mid:    250ms ease;
    --cbd6-t-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Dark theme ─────────────────────────────────────────────────────────── */

.cbd6-theme-dark {
    --cbd6-bg:        #0d1117;
    --cbd6-bg-panel:  #161b22;
    --cbd6-bg-card:   #1c2128;
    --cbd6-bg-hover:  #242b35;
    --cbd6-border:    rgba(255,255,255,0.10);
    --cbd6-border-hv: rgba(255,255,255,0.22);
    --cbd6-text:      #e6edf3;
    --cbd6-text2:     #8b949e;
    --cbd6-text3:     #484f58;
    --cbd6-shadow:    0 4px 24px rgba(0,0,0,0.55);
    --cbd6-shadow-sm: 0 2px 8px  rgba(0,0,0,0.35);
}

/* ── Light theme ────────────────────────────────────────────────────────── */

.cbd6-theme-light {
    --cbd6-bg:        #f0f2f5;
    --cbd6-bg-panel:  #ffffff;
    --cbd6-bg-card:   #ffffff;
    --cbd6-bg-hover:  #f6f8fa;
    --cbd6-border:    rgba(0,0,0,0.09);
    --cbd6-border-hv: rgba(0,0,0,0.20);
    --cbd6-text:      #1c2128;
    --cbd6-text2:     #57606a;
    --cbd6-text3:     #afb8c1;
    --cbd6-shadow:    0 4px 24px rgba(0,0,0,0.10);
    --cbd6-shadow-sm: 0 2px 8px  rgba(0,0,0,0.06);
}

/* ── App shell ──────────────────────────────────────────────────────────── */

.cbd6-app {
    position:       relative;
    display:        flex;
    flex-direction: column;
    width:          100%;
    height:         auto;
    min-height:     520px;
    background:     var(--cbd6-bg);
    color:          var(--cbd6-text);
    font-family:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                    'Helvetica Neue', Arial, sans-serif;
    font-size:      14px;
    line-height:    1.5;
    border-radius:  var(--cbd6-r-lg);
    overflow:       hidden;
    box-shadow:     var(--cbd6-shadow);
    box-sizing:     border-box;
}

.cbd6-app *,
.cbd6-app *::before,
.cbd6-app *::after { box-sizing: inherit; }

/* ── Top bar ────────────────────────────────────────────────────────────── */

.cbd6-topbar {
    display:         flex;
    align-items:     center;
    gap:             10px;
    height:          var(--cbd6-topbar-h);
    min-height:      var(--cbd6-topbar-h);
    padding:         0 14px;
    background:      var(--cbd6-bg-panel);
    border-bottom:   1px solid var(--cbd6-border);
    flex-shrink:     0;
    z-index:         10;
}

/* ── Buttons (shared base) ──────────────────────────────────────────────── */

.cbd6-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         6px 12px;
    background:      var(--cbd6-bg-card);
    border:          1px solid var(--cbd6-border);
    border-radius:   var(--cbd6-r-sm);
    color:           var(--cbd6-text);
    font-size:       13px;
    font-weight:     500;
    font-family:     inherit;
    cursor:          pointer;
    white-space:     nowrap;
    text-decoration: none;
    transition:      background var(--cbd6-t-fast),
                     border-color var(--cbd6-t-fast),
                     color var(--cbd6-t-fast);
    -webkit-user-select: none;
    user-select:     none;
}

.cbd6-btn:hover {
    background:   var(--cbd6-bg-hover);
    border-color: var(--cbd6-border-hv);
}

.cbd6-btn:focus-visible {
    outline:        2px solid var(--cbd6-accent);
    outline-offset: 2px;
}

.cbd6-btn:active { transform: scale(0.97); }

.cbd6-btn--reset {
    margin-left: auto;
    color:       var(--cbd6-text2);
    flex-shrink: 0;
}

.cbd6-btn--primary {
    background: var(--cbd6-accent);
    border-color: transparent;
    color: #fff;
}
.cbd6-btn--primary:hover { opacity: 0.88; background: var(--cbd6-accent); }

.cbd6-btn--ghost {
    background:   transparent;
    border-color: var(--cbd6-border);
    color:        var(--cbd6-text2);
}
.cbd6-btn--ghost:hover { border-color: var(--cbd6-border-hv); color: var(--cbd6-text); }

.cbd6-btn--explode {
    position:    absolute;
    bottom:      12px;
    right:       12px;
    z-index:     5;
    font-size:   12px;
    padding:     5px 11px;
    background:  var(--cbd6-bg-panel);
}
.cbd6-btn--explode[aria-pressed="true"],
.cbd6-btn--explode:hover {
    color:        var(--cbd6-accent);
    border-color: var(--cbd6-accent);
    background:   var(--cbd6-accent-glow);
}

/* ── Step indicator ─────────────────────────────────────────────────────── */

.cbd6-step-indicator {
    flex:       1;
    display:    flex;
    align-items:center;
    justify-content: center;
    gap:        6px;
    font-size:  13px;
    color:      var(--cbd6-text2);
    text-align: center;
    overflow:   hidden;
    padding:    0 4px;
}

.cbd6-step-num  { font-weight: 600; color: var(--cbd6-text); }
.cbd6-step-sep  { opacity: 0.4; }
.cbd6-step-part { color: var(--cbd6-accent); animation: cbd6-pulse 1.8s ease-in-out infinite; }
.cbd6-step-count{ opacity: 0.65; }
.cbd6-step-done { color: var(--cbd6-accent); font-weight: 600; }

/* ── Main layout ────────────────────────────────────────────────────────── */

.cbd6-main {
    display:    flex;
    flex:       1;
    min-height: 0;
    overflow:   hidden;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */

.cbd6-sidebar {
    display:        flex;
    flex-direction: column;
    width:          var(--cbd6-sidebar-w);
    min-width:      var(--cbd6-sidebar-w);
    background:     var(--cbd6-bg-panel);
    border-right:   1px solid var(--cbd6-border);
    overflow:       hidden;
    flex-shrink:    0;
}

.cbd6-sidebar-hdr {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 12px 8px;
    border-bottom:   1px solid var(--cbd6-border);
    flex-shrink:     0;
}

.cbd6-sidebar-title {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--cbd6-text2);
}

.cbd6-mode-badge {
    padding:       2px 7px;
    background:    var(--cbd6-accent-glow);
    border:        1px solid var(--cbd6-accent);
    border-radius: 20px;
    font-size:     10px;
    font-weight:   700;
    color:         var(--cbd6-accent);
}

.cbd6-part-list {
    flex:            1;
    overflow-y:      auto;
    padding:         8px;
    margin:          0;
    list-style:      none;
    scrollbar-width: thin;
    scrollbar-color: var(--cbd6-border) transparent;
}

.cbd6-sidebar-foot {
    padding:      8px 12px;
    border-top:   1px solid var(--cbd6-border);
    font-size:    12px;
    color:        var(--cbd6-text2);
    flex-shrink:  0;
    display:      flex;
    flex-direction: column;
    gap:          3px;
}

.cbd6-placed-count strong { color: var(--cbd6-text); }

.cbd6-next-hint {
    font-size: 11px;
    color:     var(--cbd6-text3);
}
.cbd6-next-hint strong { color: var(--cbd6-accent); }

/* ── Part cards ─────────────────────────────────────────────────────────── */

.cbd6-part-card {
    position:        relative;
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         8px 9px;
    margin-bottom:   5px;
    background:      var(--cbd6-bg-card);
    border:          1px solid var(--cbd6-border);
    border-radius:   var(--cbd6-r-sm);
    cursor:          grab;
    -webkit-user-select: none;
    user-select:     none;
    transition:      transform      var(--cbd6-t-spring),
                     box-shadow     var(--cbd6-t-fast),
                     border-color   var(--cbd6-t-fast),
                     opacity        var(--cbd6-t-fast),
                     background     var(--cbd6-t-fast);
}

.cbd6-part-card:hover:not(.cbd6-part-card--placed) {
    transform:    translateY(-2px);
    box-shadow:   var(--cbd6-shadow-sm);
    border-color: var(--cbd6-border-hv);
    background:   var(--cbd6-bg-hover);
}

.cbd6-part-card:focus-visible {
    outline:        2px solid var(--cbd6-accent);
    outline-offset: 1px;
}

/* State variants */
.cbd6-part-card--placed {
    opacity:        0.40;
    cursor:         default;
    pointer-events: none;
}
.cbd6-part-card--dragging {
    opacity:  0.40;
    cursor:   grabbing;
    transform: scale(0.97);
}
.cbd6-part-card--next {
    border-color: var(--cbd6-accent);
    box-shadow:   0 0 0 2px var(--cbd6-accent-glow);
}
.cbd6-part-card--touch-sel,
.cbd6-part-card--selected {
    border-color: var(--cbd6-accent);
    background:   var(--cbd6-accent-glow);
}
.cbd6-part-card--shake {
    animation: cbd6-shake 0.65s ease both;
}

/* Card inner elements */
.cbd6-card-swatch {
    width:         10px;
    height:        10px;
    border-radius: 3px;
    flex-shrink:   0;
}

.cbd6-card-body {
    flex:          1;
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    min-width:     0;
    gap:           4px;
}

.cbd6-card-name {
    font-size:     13px;
    font-weight:   500;
    color:         var(--cbd6-text);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.cbd6-card-order {
    font-size:   10px;
    font-weight: 700;
    color:       var(--cbd6-text3);
    flex-shrink: 0;
}

.cbd6-card-status {
    flex-shrink: 0;
    font-size:   13px;
    font-weight: 700;
    width:       16px;
    text-align:  center;
}
.cbd6-card-status--placed { color: #3fb950; }
.cbd6-card-status--next   { color: var(--cbd6-accent); animation: cbd6-pulse 1.4s ease-in-out infinite; }
.cbd6-card-status--touch  { color: var(--cbd6-accent); }

/* Glow ring on next card */
.cbd6-card-glow {
    position:       absolute;
    inset:          -3px;
    border-radius:  calc(var(--cbd6-r-sm) + 3px);
    border:         1.5px solid var(--cbd6-accent);
    pointer-events: none;
    animation:      cbd6-glow-ring 1.6s ease-in-out infinite;
}

/* Rejection tooltip */
.cbd6-reject-tip {
    position:    absolute;
    top:         -36px;
    left:        50%;
    transform:   translateX(-50%);
    padding:     5px 10px;
    background:  #2d1010;
    border:      1px solid #f04444;
    border-radius: var(--cbd6-r-sm);
    color:       #ff9999;
    font-size:   11px;
    white-space: nowrap;
    z-index:     100;
    animation:   cbd6-fade-in var(--cbd6-t-fast) ease;
    pointer-events: none;
}
.cbd6-reject-tip::after {
    content:   '';
    position:  absolute;
    top:       100%;
    left:      50%;
    transform: translateX(-50%);
    border:    5px solid transparent;
    border-top-color: #f04444;
}

/* ── Scene ──────────────────────────────────────────────────────────────── */

.cbd6-scene {
    position:   relative;
    flex:       1 1 auto;
    min-width:  0;
    min-height: 360px;
    /* No `height` here. .cbd6-main is a ROW flex container, so `height` is the
       CROSS axis: setting it explicitly (even to 0) disables the default
       `align-items: stretch` and leaves min-height as the only source of
       height. Leaving it auto lets the scene stretch to the full height of
       .cbd6-main, which is what makes full screen work. */
    background: var(--cbd6-bg);
    display:    flex;
    align-items:     center;
    justify-content: center;
    overflow:   hidden;
    touch-action: manipulation;  /* remove 300ms tap delay on iOS */
}

/* Touch hint banner */
.cbd6-touch-hint {
    position:    absolute;
    top:         10px;
    left:        50%;
    transform:   translateX(-50%);
    padding:     5px 14px;
    background:  var(--cbd6-accent-glow);
    border:      1px solid var(--cbd6-accent);
    border-radius: 20px;
    color:       var(--cbd6-accent);
    font-size:   12px;
    font-weight: 600;
    white-space: nowrap;
    z-index:     5;
    pointer-events: none;
    animation:   cbd6-fade-in var(--cbd6-t-mid);
}

/* ── SVG phone visual ───────────────────────────────────────────────────── */

.cbd6-phone-svg {
    /* Absolutely positioned inside .cbd6-scene (position: relative).
       Percentages on an absolutely positioned element resolve against the
       containing block directly, with none of the "definite height"
       requirements that apply to in-flow percentage heights. The viewBox plus
       the default preserveAspectRatio="xMidYMid meet" scales the phone to fit
       and centres it, so this is both simpler and far more robust than the
       previous in-flow height: 100%.
       z-index 1 keeps it below the touch hint and explode button (z-index 5). */
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    height:     100%;
    z-index:    1;
    display:    block;
    overflow:   visible;
}

/* ── Chassis colours (theme-aware) ─────────────────────────────────────── */

/* Chassis fills — set via CSS custom property on .cbd6-app
   so SVG fill:var() works without descendant selector matching */
.cbd6-theme-dark  { --cbd6-chassis-fill: #1a1f2e; }
.cbd6-theme-light { --cbd6-chassis-fill: #2a2f3e; }

/* Keep descendant selectors as fallback for non-CSS-var browsers */
.cbd6-theme-dark  .cbd6-chassis-body  { fill: #1a1f2e; }
.cbd6-theme-light .cbd6-chassis-body  { fill: #2a2f3e; }

.cbd6-chassis-bezel { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
.cbd6-chassis-stroke{ stroke: rgba(255,255,255,0.18); stroke-width: 1.5; }
.cbd6-screen-bezel  { stroke: rgba(255,255,255,0.10); stroke-width: 0.5; }

.cbd6-theme-dark  .cbd6-screen-void { fill: #050810; }
.cbd6-theme-light .cbd6-screen-void { fill: #0a0d1a; }

.cbd6-notch  { fill: #0a0d1a; }
.cbd6-button { fill: #2a2f3e; }
.cbd6-grill-dot  { fill: rgba(255,255,255,0.15); }
.cbd6-port-outline{ fill: none; stroke: rgba(255,255,255,0.20); stroke-width: 1; }
.cbd6-chin-line  { stroke: rgba(255,255,255,0.06); stroke-width: 0.5; }

/* ── Drop zones ─────────────────────────────────────────────────────────── */

.cbd6-drop-zone {
    fill:            transparent;
    stroke:          transparent;
    stroke-width:    0;
    cursor:          copy;
    pointer-events:  all;
    -webkit-transition: fill var(--cbd6-t-fast);
        transition:      fill var(--cbd6-t-fast);
}

.cbd6-drop-zone--active {
    fill:   var(--cbd6-accent-glow);
    stroke: var(--cbd6-accent);
    stroke-width: 1.5;
    stroke-dasharray: 5 3;
}

/* ── Ghost targets (guided mode) ────────────────────────────────────────── */

.cbd6-ghost {
    fill:            none;
    stroke-width:    1.5;
    stroke-dasharray: 6 4;
    opacity:         0;
    pointer-events:  none;
    transition:      opacity var(--cbd6-t-mid);
}

.cbd6-ghost--visible {
    opacity:   1;
    animation: cbd6-ghost-pulse 1.8s ease-in-out infinite;
}

/* ── Component layers ───────────────────────────────────────────────────── */

.cbd6-layer {
    opacity:        0;
    pointer-events: none;
    /* No CSS transform on SVG <g> — Safari uses wrong transform-origin
       for SVG elements, causing groups to render at (0,0) of the viewport.
       Snap-in uses opacity fade only; explode uses SVG transform attribute
       applied directly by JS. */
    -webkit-transition: opacity 350ms var(--cbd6-t-spring);
            transition: opacity 350ms var(--cbd6-t-spring);
    will-change: opacity;
}

.cbd6-layer--placed {
    opacity:        1;
    pointer-events: all;
    cursor:         pointer;
}

.cbd6-layer--placed:hover { opacity: 0.90; }

.cbd6-layer--selected .cbd6-layer-fill {
    filter: brightness(1.25);
}

/* Layer fills — component colours */
.cbd6-layer-fill    { opacity: 0.92; }
.cbd6-layer-detail  { fill: rgba(255,255,255,0.08); }
.cbd6-layer-trace   { stroke: rgba(255,255,255,0.20); stroke-width: 1; fill: none; }
.cbd6-layer-chip    { fill: rgba(0,0,0,0.35); }
.cbd6-layer-chip-inner { fill: rgba(255,255,255,0.06); }
.cbd6-layer-cap     { fill: rgba(255,255,255,0.15); }
.cbd6-layer-terminal{ fill: rgba(255,255,255,0.25); }

/* Labels inside layers */
.cbd6-layer-label {
    font-family: inherit;
    font-size:   13px;
    font-weight: 600;
    fill:        rgba(255,255,255,0.80);
    pointer-events: none;
    letter-spacing: 0.02em;
}
.cbd6-label-small {
    font-size: 10px;
    fill:      rgba(255,255,255,0.65);
}

/* Screen layer detail */
.cbd6-screen-band-1 { fill: rgba(255,255,255,0.04); }
.cbd6-screen-band-2 { fill: rgba(0,0,0,0.15); }
.cbd6-screen-status { fill: rgba(255,255,255,0.12); rx: 3; }
.cbd6-screen-home   { fill: rgba(255,255,255,0.25); rx: 2.5; }

/* Camera layer detail */
.cbd6-camera-ring-outer { fill: #1a1a1a; stroke: rgba(255,255,255,0.20); stroke-width: 1; }
.cbd6-camera-ring-inner { fill: #111111; stroke: rgba(255,255,255,0.15); stroke-width: 0.5; }
.cbd6-camera-lens       { fill: #0a0a1a; }
.cbd6-camera-glint      { fill: rgba(255,255,255,0.45); }
.cbd6-camera-flash      { fill: #ffe066; }

/* Front camera */
.cbd6-fcam-dot    { fill: #111111; stroke: rgba(255,255,255,0.20); stroke-width: 0.5; }
.cbd6-fcam-iris   { fill: #1a1a2e; }
.cbd6-fcam-sensor { fill: rgba(255,255,255,0.10); }

/* Speaker */
.cbd6-speaker-dot { fill: rgba(255,255,255,0.18); }

/* Charging port */
.cbd6-port-pad { fill: rgba(255,255,255,0.30); }

/* ── Exploded view ──────────────────────────────────────────────────────── */

/* Exploded view transforms are applied by JS directly as SVG transform
   attributes on each <g> element, bypassing Safari's unreliable CSS
   transform support on SVG elements. See toggleExplode() in app.js. */

/* ── Info panel ─────────────────────────────────────────────────────────── */

.cbd6-info-panel {
    width:          var(--cbd6-panel-w);
    min-width:      var(--cbd6-panel-w);
    background:     var(--cbd6-bg-panel);
    border-left:    1px solid var(--cbd6-border);
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    flex-shrink:    0;
}

.cbd6-info-empty {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         24px 16px;
    text-align:      center;
    color:           #ffffff;
    gap:             10px;
}
.cbd6-info-empty .cbd6-info-icon { font-size: 28px; opacity: 0.5; }
.cbd6-info-empty p               { font-size: 13px; margin: 0; }

.cbd6-info-content {
    flex:            1;
    overflow-y:      auto;
    scrollbar-width: thin;
    scrollbar-color: var(--cbd6-border) transparent;
    animation:       cbd6-slide-in var(--cbd6-t-mid) ease both;
}

.cbd6-info-header {
    padding:       12px 14px;
    border-bottom: 1px solid var(--cbd6-border);
    border-left:   3px solid var(--cbd6-accent);
    display:       flex;
    align-items:   center;
    gap:           9px;
}
.cbd6-info-swatch {
    width:         11px;
    height:        11px;
    border-radius: 3px;
    flex-shrink:   0;
}
.cbd6-info-name {
    margin:      0;
    font-size:   14px;
    font-weight: 600;
    color:       #ffffff;
    line-height: 1.3;
}

.cbd6-info-section { padding: 12px 14px 0; }
.cbd6-info-section h3 {
    margin:         0 0 5px;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          #ffffff;
}
.cbd6-info-section p {
    margin:      0;
    font-size:   12px;
    color:       #ffffff;
    line-height: 1.65;
}

.cbd6-info-highlight {
    margin:      10px 10px 0;
    padding:     10px 12px;
    background:  var(--cbd6-bg-card);
    border:      1px solid var(--cbd6-border);
    border-left: 2px solid var(--cbd6-accent);
    border-radius: var(--cbd6-r-sm);
}
.cbd6-info-highlight p {
    font-size: 12px;
    color:     #ffffff;
    font-style: italic;
}

/* ── Footer / progress bar ──────────────────────────────────────────────── */

.cbd6-footer {
    height:      var(--cbd6-footer-h);
    min-height:  var(--cbd6-footer-h);
    flex-shrink: 0;
    border-top:  1px solid var(--cbd6-border);
    background:  var(--cbd6-bg-panel);
}

.cbd6-progress-wrap {
    display:     flex;
    align-items: center;
    gap:         12px;
    height:      100%;
    padding:     0 14px;
}

.cbd6-progress-track {
    flex:          1;
    height:        5px;
    background:    var(--cbd6-bg-card);
    border-radius: 3px;
    overflow:      hidden;
    border:        1px solid var(--cbd6-border);
}

.cbd6-progress-fill {
    height:           100%;
    border-radius:    3px;
    background-color: var(--cbd6-accent);
    transition:       width 500ms ease;
    min-width:        0;
}

.cbd6-progress-label {
    font-size:   12px;
    color:       var(--cbd6-text2);
    white-space: nowrap;
    flex-shrink: 0;
}



/* ── Completion celebration ─────────────────────────────────────────────────
   A short particle burst in the component colours, fired when the final
   component is placed. Built from HTML elements rather than SVG so that CSS
   transforms behave identically in every browser, Safari included.
   Fully suppressed under prefers-reduced-motion (see the block at the end
   of this file), and JS also checks the same media query before firing.
─────────────────────────────────────────────────────────────────────────── */

.cbd6-burst {
    position:       absolute;
    top:            50%;
    left:           50%;
    width:          0;
    height:         0;
    pointer-events: none;
    z-index:        30;
}

.cbd6-burst-dot {
    position:       absolute;
    top:            0;
    left:           0;
    border-radius:  50%;
    opacity:        0;
    pointer-events: none;
    will-change:    transform, opacity;
    -webkit-animation: cbd6-burst-fly 1150ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
            animation: cbd6-burst-fly 1150ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@-webkit-keyframes cbd6-burst-fly {
    0%   { opacity: 0;    -webkit-transform: translate(0,0) scale(0.3) rotate(0deg); }
    12%  { opacity: 1;    }
    100% { opacity: 0;    -webkit-transform: translate(var(--cbd6-dx), var(--cbd6-dy))
                                             scale(1) rotate(var(--cbd6-rot)); }
}

@keyframes cbd6-burst-fly {
    0%   { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0deg); }
    12%  { opacity: 1; }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--cbd6-dx), var(--cbd6-dy))
                                  scale(1) rotate(var(--cbd6-rot)); }
}

/* ── Full screen ────────────────────────────────────────────────────────────
   Two mechanisms:
   1. :fullscreen  — real Fullscreen API (desktop, Android, Kindle, iPad)
   2. --pseudo-fs  — fixed-position fallback for iPhone Safari, which does
                     not allow true full screen on non-video elements.
   Both produce the same visual result.
─────────────────────────────────────────────────────────────────────────── */

.cbd6-app:fullscreen,
.cbd6-app:-webkit-full-screen {
    width:         100vw;
    height:        100vh;
    max-width:     none;
    max-height:    none;
    border:        none;
    border-radius: 0;
    margin:        0;
}

/* Pseudo full screen for iPhone Safari */
.cbd6-app--pseudo-fs {
    position:      fixed;
    top:           0;
    left:          0;
    right:         0;
    bottom:        0;
    width:         100%;
    /* dvh accounts for the collapsing iOS address bar; vh is the fallback */
    height:        100vh;
    height:        100dvh;
    max-width:     none;
    max-height:    none;
    z-index:       999999;
    border:        none;
    border-radius: 0;
    margin:        0;
}

/* Prevent the page behind the pseudo full screen app from scrolling */
html.cbd6-fs-lock,
body.cbd6-fs-lock {
    overflow:               hidden;
    overscroll-behavior:    none;
    -webkit-overflow-scrolling: auto;
    touch-action:           none;
}

/* Full screen needs no scene height override: with the explicit cross-size
   removed from .cbd6-scene above, `align-items: stretch` on .cbd6-main makes
   the scene fill the container at every size, full screen included. */

/* Keep the surface opaque over any user-agent :fullscreen backdrop styling */
.cbd6-app--fs { background: var(--cbd6-bg); }

.cbd6-btn--fs { flex-shrink: 0; }

/* Icon-only on narrow screens to keep the toolbar uncluttered */
@media (max-width: 640px) {
    .cbd6-btn--fs .cbd6-fs-label { display: none; }
    .cbd6-btn--fs { padding: 4px 7px; }
}

/* ── Brand footer title ─────────────────────────────────────────────────────── */

.cbd6-brand-footer {
    text-align:      center;
    font-size:       11px;
    font-weight:     500;
    color:           #ffffff;
    letter-spacing:  0.04em;
    padding:         5px 14px 6px;
    background:      var(--cbd6-bg-panel);
    border-top:      1px solid var(--cbd6-border);
    opacity:         1;
    pointer-events:  none;
    -webkit-user-select: none;
    user-select:     none;
    flex-shrink:     0;
}

/* ── Completion overlay ─────────────────────────────────────────────────── */

.cbd6-overlay {
    position:         absolute;
    inset:            0;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    z-index:          50;
}

.cbd6-overlay-scrim {
    position:   absolute;
    inset:      0;
    background: rgba(0,0,0,0.72);
    animation:  cbd6-fade-in var(--cbd6-t-mid) ease;
}

.cbd6-overlay-card {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             14px;
    padding:         36px 32px;
    background:      var(--cbd6-bg-panel);
    border:          1px solid var(--cbd6-border);
    border-radius:   var(--cbd6-r-lg);
    text-align:      center;
    max-width:       340px;
    width:           90%;
    z-index:         1;
    box-shadow:      var(--cbd6-shadow);
    animation:       cbd6-pop-in 400ms cubic-bezier(0.34,1.56,0.64,1) both;
}

.cbd6-overlay-check {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           60px;
    height:          60px;
    border-radius:   50%;
    border:          2px solid;
    font-size:       26px;
    font-weight:     700;
    animation:       cbd6-pop-in 400ms cubic-bezier(0.34,1.56,0.64,1) 80ms both;
}

.cbd6-overlay-title {
    margin:      0;
    font-size:   20px;
    font-weight: 700;
    color:       var(--cbd6-text);
}

.cbd6-overlay-msg {
    margin:      0;
    font-size:   14px;
    color:       var(--cbd6-text2);
    line-height: 1.6;
}

.cbd6-overlay-actions {
    display:   flex;
    gap:       10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

/* ── Animations ─────────────────────────────────────────────────────────── */

@keyframes cbd6-fade-in  { from { opacity: 0; }                                to { opacity: 1; } }
@keyframes cbd6-slide-in { from { opacity: 0; transform: translateX(10px); }   to { opacity: 1; transform: translateX(0); } }
@keyframes cbd6-pop-in   { from { opacity: 0; transform: scale(0.72); }        to { opacity: 1; transform: scale(1); } }

@keyframes cbd6-shake {
    0%,100% { transform: translateX(0);    }
    18%     { transform: translateX(-7px); }
    36%     { transform: translateX( 7px); }
    54%     { transform: translateX(-5px); }
    72%     { transform: translateX( 5px); }
    88%     { transform: translateX(-2px); }
}

@keyframes cbd6-glow-ring {
    0%,100% { opacity: 1;    transform: scale(1);    }
    50%     { opacity: 0.30; transform: scale(1.04); }
}

@keyframes cbd6-ghost-pulse {
    0%,100% { opacity: 1;   }
    50%     { opacity: 0.30;}
}

@keyframes cbd6-pulse {
    0%,100% { opacity: 1;   }
    50%     { opacity: 0.45;}
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .cbd6-card-glow,
    .cbd6-ghost--visible,
    .cbd6-step-part,
    .cbd6-card-status--next { animation: none; }

    .cbd6-layer,
    .cbd6-progress-fill     { transition: none; }

    /* Celebration is skipped in JS as well; this is a belt-and-braces guard
       in case the burst element is ever inserted by other means. */
    .cbd6-burst             { display: none; }
    .cbd6-burst-dot         { -webkit-animation: none; animation: none; opacity: 0; }
}

/* ── Responsive — tablet (≤960px) ──────────────────────────────────────── */

@media (max-width: 960px) {
    .cbd6-app {
        --cbd6-panel-w: 0px;
    }
    .cbd6-info-panel { display: none; }
}

/* ── Responsive — mobile portrait and landscape (≤640px) ────────────────── */

@media (max-width: 640px) {
    .cbd6-app {
        --cbd6-sidebar-w: 100%;
        border-radius: 0;
    }

    /* Stack: scene on top, sidebar strip on bottom */
    .cbd6-main {
        flex-direction: column;
        min-height:     0;
        flex:           1 1 auto;
    }

    /* Scene takes all available height above the sidebar strip */
    .cbd6-scene {
        flex:           1 1 auto;
        min-height:     260px;
        /* .cbd6-main is COLUMN here, so `height` is the MAIN axis and
           `height: 0` is the correct flex-basis idiom. This is the opposite
           of the row layouts above, where it must be omitted. */
        height:         0;
        width:          100%;
    }

    /* Sidebar becomes a fixed-height horizontal scroll strip */
    .cbd6-sidebar {
        width:          100%;
        min-width:      100%;
        height:         96px;
        min-height:     96px;
        max-height:     96px;
        flex:           0 0 96px;   /* never grow or shrink */
        border-right:   none;
        border-top:     1px solid var(--cbd6-border);
        overflow:       hidden;
    }

    .cbd6-sidebar-hdr,
    .cbd6-sidebar-foot { display: none; }

    /* Horizontal scrolling card row */
    .cbd6-part-list {
        display:                  flex;
        flex-direction:           row;
        flex-wrap:                nowrap;
        overflow-x:               auto;
        overflow-y:               hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type:         x mandatory;
        padding:                  6px 8px;
        gap:                      6px;
        height:                   100%;
        align-items:              center;
    }

    /* Individual component card in strip */
    .cbd6-part-card {
        flex:           0 0 68px;
        width:          68px;
        min-width:      68px;
        flex-direction: column;
        gap:            3px;
        padding:        7px 6px;
        text-align:     center;
        margin-bottom:  0;
        scroll-snap-align: start;
    }

    .cbd6-card-body {
        flex-direction: column;
        align-items:    center;
        gap:            2px;
    }

    .cbd6-card-name {
        font-size:   9px;
        white-space: normal;
        overflow:    visible;
        text-overflow: unset;
        line-height: 1.3;
        word-break:  break-word;
        max-width:   64px;
    }

    .cbd6-card-order  { display: none; }
    .cbd6-card-status { font-size: 11px; }

    /* Topbar compact */
    .cbd6-topbar {
        padding:  0 8px;
        gap:      6px;
        height:   44px;
        min-height: 44px;
    }

    .cbd6-btn--mode  {
        padding:   4px 8px;
        font-size: 11px;
        flex-shrink: 0;
    }
    .cbd6-btn--reset {
        padding:   4px 8px;
        font-size: 11px;
        flex-shrink: 0;
    }

    /* Shorten topbar title on narrow screens */

    /* Hide step separator text on mobile */
    .cbd6-step-sep,
    .cbd6-step-num { display: none; }

    .cbd6-step-part { font-size: 11px; }

    /* Footer compact */
    .cbd6-footer {
        height:     38px;
        min-height: 38px;
    }

    .cbd6-progress-wrap { padding: 0 10px; gap: 8px; }
    .cbd6-progress-label { font-size: 11px; }

    .cbd6-overlay-card { padding: 20px 16px; }
}

/* ── Landscape phone (height ≤ 500px) ────────────────────────────────────── */

@media (max-height: 500px) and (max-width: 900px) {
    /* In landscape the sidebar strip must be narrower */
    .cbd6-app {
        --cbd6-sidebar-w: 100%;
    }

    /* Switch to side-by-side layout: sidebar left, scene right */
    .cbd6-main {
        flex-direction: row;
    }

    .cbd6-sidebar {
        width:          80px;
        min-width:      80px;
        max-width:      80px;
        height:         auto;
        min-height:     unset;
        max-height:     unset;
        flex:           0 0 80px;
        border-right:   1px solid var(--cbd6-border);
        border-top:     none;
        overflow:       hidden;
    }

    .cbd6-sidebar-hdr,
    .cbd6-sidebar-foot { display: none; }

    /* Vertical scrolling strip of cards in landscape */
    .cbd6-part-list {
        flex-direction:           column;
        flex-wrap:                nowrap;
        overflow-x:               hidden;
        overflow-y:               auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type:         y mandatory;
        padding:                  6px 4px;
        gap:                      4px;
        height:                   100%;
        align-items:              center;
    }

    .cbd6-part-card {
        flex:           0 0 64px;
        width:          64px;
        min-width:      unset;
        padding:        6px 4px;
        scroll-snap-align: start;
    }

    .cbd6-card-name { font-size: 8px; }

    .cbd6-scene {
        flex:       1 1 auto;
        min-height: 0;
        /* Row direction here too, so no explicit height (see base rule). */
    }

    .cbd6-topbar {
        height:     40px;
        min-height: 40px;
    }

    .cbd6-step-indicator { font-size: 11px; }
}

/* ── Very small portrait (≤380px wide) ───────────────────────────────────── */

@media (max-width: 380px) {
    .cbd6-step-indicator  { display: none; }
    .cbd6-btn--reset span:not([aria-hidden]) { display: none; }

    .cbd6-topbar { gap: 4px; padding: 0 6px; }
    .cbd6-btn--mode { font-size: 10px; padding: 4px 6px; }
}