/* ── Theme variables — Snapping Shrimp brand tokens ───────────── */
:root {
  --clr-accent:       #EE5102;
    --clr-accent-dark:  #d64a02;
      --clr-bg:           #FAF8F3;
        --clr-card:         #FFFFFF;
          --clr-text:         #111111;
            --clr-text-muted:   #6B7280;
              --clr-border:       #D8DCE2;
                --clr-correct:      #28A745;
                  --clr-wrong:        #DC3545;
                  
                    --radius-card:      2px;
                      --radius-item:      2px;
                        --accent-bar-w:     38px;
                          --connector-w:      14px;
                            --item-h:           52px;
                              --gap:              10px;
                                --col-gap:          56px;
                                  --transition:       0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
                                  }
                                  
                                  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
                                  
                                  @media (prefers-reduced-motion: reduce) {
                                    *, *::before, *::after {
                                        animation-duration: 0.01ms !important;
                                            animation-iteration-count: 1 !important;
                                                transition-duration: 0.01ms !important;
                                                    scroll-behavior: auto !important;
                                                      }
                                                      }
                                                      
                                                      body {
                                                        font-family: 'Space Grotesk', sans-serif;
                                                          background: var(--clr-bg);
                                                            color: var(--clr-text);
                                                              min-height: auto;
                                                                padding: 28px 16px 32px;
                                                                }
                                                                
                                                                #app {
                                                                  max-width: 640px;
                                                                    margin: 0 auto;
                                                                      display: flex;
                                                                        flex-direction: column;
                                                                          gap: 32px;
                                                                          }
                                                                          
                                                                          h1 {
                                                                            font-family: 'Archivo Black', sans-serif;
                                                                              font-size: 1.3rem;
                                                                                font-weight: 400;
                                                                                  text-align: center;
                                                                                    color: var(--clr-text);
                                                                                    }
                                                                                    
                                                                                    .quiz-card {
                                                                                      background: var(--clr-card);
                                                                                        border-radius: var(--radius-card);
                                                                                          box-shadow: 0 2px 16px rgba(0,0,0,.08);
                                                                                            padding: 24px;
                                                                                            }
                                                                                            
                                                                                            .quiz-card__prompt {
                                                                                              font-size: .95rem;
                                                                                                color: var(--clr-text-muted);
                                                                                                  margin-bottom: 20px;
                                                                                                    font-style: italic;
                                                                                                    }
                                                                                                    
                                                                                                    .match-grid {
                                                                                                      display: grid;
                                                                                                        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                                                                                                          row-gap: var(--gap);
                                                                                                            column-gap: var(--col-gap);
                                                                                                              align-items: start;
                                                                                                              }
                                                                                                              
                                                                                                              .col-choices, .col-matches {
                                                                                                                display: flex;
                                                                                                                  flex-direction: column;
                                                                                                                    gap: var(--gap);
                                                                                                                      min-width: 0;
                                                                                                                        overflow: visible;
                                                                                                                        }
                                                                                                                        
                                                                                                                        .item {
                                                                                                                          position: relative;
                                                                                                                            height: var(--item-h);
                                                                                                                              display: flex;
                                                                                                                                align-items: center;
                                                                                                                                  min-width: 0;
                                                                                                                                    user-select: none;
                                                                                                                                      touch-action: none;
                                                                                                                                        overflow: visible;
                                                                                                                                        }
                                                                                                                                        
                                                                                                                                        .choice-item {
                                                                                                                                          background: var(--clr-card);
                                                                                                                                            border: 1px solid var(--clr-border);
                                                                                                                                              border-right: none;
                                                                                                                                                border-radius: var(--radius-item) 0 0 var(--radius-item);
                                                                                                                                                  padding: 0 12px 0 calc(var(--accent-bar-w) + 10px);
                                                                                                                                                    cursor: grab;
                                                                                                                                                      transition: border-color var(--transition), box-shadow var(--transition), transform .15s ease;
                                                                                                                                                        will-change: transform;
                                                                                                                                                          width: 100%;
                                                                                                                                                          }
                                                                                                                                                          
                                                                                                                                                          .choice-item:active { cursor: grabbing; }
                                                                                                                                                          
                                                                                                                                                          .choice-accent {
                                                                                                                                                            position: absolute;
                                                                                                                                                              left: 0;
                                                                                                                                                                top: 0;
                                                                                                                                                                  bottom: 0;
                                                                                                                                                                    width: var(--accent-bar-w);
                                                                                                                                                                      background: var(--clr-accent);
                                                                                                                                                                        border-radius: calc(var(--radius-item) - 2px) 0 0 calc(var(--radius-item) - 2px);
                                                                                                                                                                          display: flex;
                                                                                                                                                                            align-items: center;
                                                                                                                                                                              justify-content: center;
                                                                                                                                                                                flex-shrink: 0;
                                                                                                                                                                                }
                                                                                                                                                                                
                                                                                                                                                                                .choice-accent .grab-icon {
                                                                                                                                                                                  width: 14px;
                                                                                                                                                                                    height: 14px;
                                                                                                                                                                                      color: rgba(255,255,255,.75);
                                                                                                                                                                                        overflow: visible;
                                                                                                                                                                                          pointer-events: none;
                                                                                                                                                                                          }
                                                                                                                                                                                          
                                                                                                                                                                                          .choice-item .label {
                                                                                                                                                                                            flex: 1;
                                                                                                                                                                                              font-size: .9rem;
                                                                                                                                                                                                white-space: nowrap;
                                                                                                                                                                                                  overflow: hidden;
                                                                                                                                                                                                    text-overflow: ellipsis;
                                                                                                                                                                                                      pointer-events: none;
                                                                                                                                                                                                      }
                                                                                                                                                                                                      
                                                                                                                                                                                                      .choice-item .jigsaw-right,
                                                                                                                                                                                                      .drag-ghost   .jigsaw-right {
                                                                                                                                                                                                        position: absolute;
                                                                                                                                                                                                          left: 100%;
                                                                                                                                                                                                            top: -1px;
                                                                                                                                                                                                              width: var(--connector-w);
                                                                                                                                                                                                                height: calc(var(--item-h) + 2px);
                                                                                                                                                                                                                  pointer-events: none;
                                                                                                                                                                                                                    overflow: visible;
                                                                                                                                                                                                                    }
                                                                                                                                                                                                                    
                                                                                                                                                                                                                    .match-item {
                                                                                                                                                                                                                      background: var(--clr-card);
                                                                                                                                                                                                                        border: 1px solid var(--clr-border);
                                                                                                                                                                                                                          border-left: none;
                                                                                                                                                                                                                            border-radius: 0 var(--radius-item) var(--radius-item) 0;
                                                                                                                                                                                                                              padding: 0 36px 0 calc(var(--connector-w) + 10px);
                                                                                                                                                                                                                                width: 100%;
                                                                                                                                                                                                                                  transition: border-color var(--transition), background var(--transition);
                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                  .match-item .jigsaw-left {
                                                                                                                                                                                                                                    position: absolute;
                                                                                                                                                                                                                                      left: 0;
                                                                                                                                                                                                                                        top: -1px;
                                                                                                                                                                                                                                          width: var(--connector-w);
                                                                                                                                                                                                                                            height: calc(var(--item-h) + 2px);
                                                                                                                                                                                                                                              pointer-events: none;
                                                                                                                                                                                                                                                overflow: visible;
                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                .match-item .label {
                                                                                                                                                                                                                                                  font-size: .9rem;
                                                                                                                                                                                                                                                    white-space: nowrap;
                                                                                                                                                                                                                                                      overflow: hidden;
                                                                                                                                                                                                                                                        text-overflow: ellipsis;
                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                        .jigsaw-right path,
                                                                                                                                                                                                                                                        .jigsaw-left  path {
                                                                                                                                                                                                                                                          fill:   none;
                                                                                                                                                                                                                                                            stroke: var(--clr-border);
                                                                                                                                                                                                                                                              stroke-width:    1;
                                                                                                                                                                                                                                                                stroke-linecap:  butt;
                                                                                                                                                                                                                                                                  stroke-linejoin: miter;
                                                                                                                                                                                                                                                                    transition: stroke var(--transition);
                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                    .match-item .feedback-icon {
                                                                                                                                                                                                                                                                      position: absolute;
                                                                                                                                                                                                                                                                        right: 10px;
                                                                                                                                                                                                                                                                          top: 50%;
                                                                                                                                                                                                                                                                            transform: translateY(-50%);
                                                                                                                                                                                                                                                                              width: 22px;
                                                                                                                                                                                                                                                                                height: 22px;
                                                                                                                                                                                                                                                                                  display: none;
                                                                                                                                                                                                                                                                                    overflow: visible;
                                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                                    .choice-item.is-dragging {
                                                                                                                                                                                                                                                                                      opacity: 0.13;
                                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                                      .choice-item.is-dragging .choice-accent {
                                                                                                                                                                                                                                                                                        background: var(--clr-border);
                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                        .drag-ghost {
                                                                                                                                                                                                                                                                                          position: fixed;
                                                                                                                                                                                                                                                                                            top: 0;
                                                                                                                                                                                                                                                                                              left: 0;
                                                                                                                                                                                                                                                                                                pointer-events: none;
                                                                                                                                                                                                                                                                                                  z-index: 9999;
                                                                                                                                                                                                                                                                                                    background: var(--clr-card);
                                                                                                                                                                                                                                                                                                      border: 1px solid var(--clr-border);
                                                                                                                                                                                                                                                                                                        border-right: none;
                                                                                                                                                                                                                                                                                                          border-radius: var(--radius-item) 0 0 var(--radius-item);
                                                                                                                                                                                                                                                                                                            padding: 0 12px 0 calc(var(--accent-bar-w) + 10px);
                                                                                                                                                                                                                                                                                                              display: flex;
                                                                                                                                                                                                                                                                                                                align-items: center;
                                                                                                                                                                                                                                                                                                                  box-shadow: 0 10px 28px rgba(0,0,0,.20);
                                                                                                                                                                                                                                                                                                                    transform: translateY(-4px) scale(1.03);
                                                                                                                                                                                                                                                                                                                      transition: transform .2s cubic-bezier(0.34,1.56,0.64,1);
                                                                                                                                                                                                                                                                                                                        overflow: visible;
                                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                        .drag-ghost .jigsaw-right path { fill: var(--clr-card); }
                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                        .drag-ghost .label {
                                                                                                                                                                                                                                                                                                                          font-size: .9rem;
                                                                                                                                                                                                                                                                                                                            white-space: nowrap;
                                                                                                                                                                                                                                                                                                                              overflow: hidden;
                                                                                                                                                                                                                                                                                                                                text-overflow: ellipsis;
                                                                                                                                                                                                                                                                                                                                  pointer-events: none;
                                                                                                                                                                                                                                                                                                                                    flex: 1;
                                                                                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                                                                                    .match-item.drop-over {
                                                                                                                                                                                                                                                                                                                                      border-color: var(--clr-accent);
                                                                                                                                                                                                                                                                                                                                        background: rgba(238,81,2,.06);
                                                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                                        .match-item.snap-over {
                                                                                                                                                                                                                                                                                                                                          border-color: var(--clr-accent);
                                                                                                                                                                                                                                                                                                                                            background: rgba(238,81,2,.08);
                                                                                                                                                                                                                                                                                                                                              box-shadow: 0 0 0 3px rgba(238,81,2,.18);
                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                              .match-item.snap-over .jigsaw-left path { stroke: var(--clr-accent); }
                                                                                                                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                                                                                                              .choice-item.connected { border-color: var(--clr-accent); z-index: 1; }
                                                                                                                                                                                                                                                                                                                                              .match-item.connected  { border-color: var(--clr-accent); }
                                                                                                                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                                                                                                              .choice-item.connected .jigsaw-right path,
                                                                                                                                                                                                                                                                                                                                              .match-item.connected  .jigsaw-left  path { stroke: var(--clr-accent); }
                                                                                                                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                                                                                                              .choice-item.correct { border-color: var(--clr-correct); }
                                                                                                                                                                                                                                                                                                                                              .match-item.correct  { border-color: var(--clr-correct); }
                                                                                                                                                                                                                                                                                                                                              .choice-item.wrong   { border-color: var(--clr-wrong);   }
                                                                                                                                                                                                                                                                                                                                              .match-item.wrong    { border-color: var(--clr-wrong);   }
                                                                                                                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                                                                                                              .choice-item.correct .jigsaw-right path,
                                                                                                                                                                                                                                                                                                                                              .match-item.correct  .jigsaw-left  path { stroke: var(--clr-correct); }
                                                                                                                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                                                                                                              .choice-item.wrong   .jigsaw-right path,
                                                                                                                                                                                                                                                                                                                                              .match-item.wrong    .jigsaw-left  path { stroke: var(--clr-wrong);   }
                                                                                                                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                                                                                                              .match-item.correct .feedback-icon.tick,
                                                                                                                                                                                                                                                                                                                                              .match-item.wrong   .feedback-icon.cross { display: block; }
                                                                                                                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                                                                                                              .match-item.correct .feedback-icon.tick  { color: var(--clr-correct); }
                                                                                                                                                                                                                                                                                                                                              .match-item.wrong   .feedback-icon.cross { color: var(--clr-wrong);   }
                                                                                                                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                                                                                                              .choice-item.locked { cursor: default; pointer-events: none; }
                                                                                                                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                                                                                                              .card-actions {
                                                                                                                                                                                                                                                                                                                                                display: flex;
                                                                                                                                                                                                                                                                                                                                                  justify-content: center;
                                                                                                                                                                                                                                                                                                                                                    gap: 12px;
                                                                                                                                                                                                                                                                                                                                                      margin-top: 24px;
                                                                                                                                                                                                                                                                                                                                                        flex-wrap: wrap;
                                                                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                                                        .btn {
                                                                                                                                                                                                                                                                                                                                                          display: inline-flex;
                                                                                                                                                                                                                                                                                                                                                            align-items: center;
                                                                                                                                                                                                                                                                                                                                                              justify-content: center;
                                                                                                                                                                                                                                                                                                                                                                min-height: 44px;
                                                                                                                                                                                                                                                                                                                                                                  padding: 10px 32px;
                                                                                                                                                                                                                                                                                                                                                                    border-radius: 2px;
                                                                                                                                                                                                                                                                                                                                                                      border: 1px solid transparent;
                                                                                                                                                                                                                                                                                                                                                                        font-family: 'Space Grotesk', sans-serif;
                                                                                                                                                                                                                                                                                                                                                                          font-size: .85rem;
                                                                                                                                                                                                                                                                                                                                                                            font-weight: 700;
                                                                                                                                                                                                                                                                                                                                                                              cursor: pointer;
                                                                                                                                                                                                                                                                                                                                                                                transition: background .2s, transform .1s;
                                                                                                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                                                                                                .btn:active { transform: scale(.97); }
                                                                                                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                                                                                                .btn-primary {
                                                                                                                                                                                                                                                                                                                                                                                  background: var(--clr-accent);
                                                                                                                                                                                                                                                                                                                                                                                    color: #fff;
                                                                                                                                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                                                                                                                                    .btn-primary:hover, .btn-primary:focus-visible { background: var(--clr-accent-dark); }
                                                                                                                                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                                                                                                                                    .btn-secondary {
                                                                                                                                                                                                                                                                                                                                                                                      background: transparent;
                                                                                                                                                                                                                                                                                                                                                                                        color: #0B1533;
                                                                                                                                                                                                                                                                                                                                                                                          border-color: #0B1533;
                                                                                                                                                                                                                                                                                                                                                                                          }
                                                                                                                                                                                                                                                                                                                                                                                          .btn-secondary:hover { background: rgba(11,21,51,.06); }
                                                                                                                                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                                                                                                                                          .score-banner {
                                                                                                                                                                                                                                                                                                                                                                                            text-align: center;
                                                                                                                                                                                                                                                                                                                                                                                              font-weight: 700;
                                                                                                                                                                                                                                                                                                                                                                                                font-size: 1rem;
                                                                                                                                                                                                                                                                                                                                                                                                  margin-top: 12px;
                                                                                                                                                                                                                                                                                                                                                                                                    min-height: 1.4em;
                                                                                                                                                                                                                                                                                                                                                                                                      color: var(--clr-text);
                                                                                                                                                                                                                                                                                                                                                                                                        display: none;
                                                                                                                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                                                                                                                        .score-banner.visible { display: block; }
                                                                                                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                                                                                                        .choice-item:focus-visible {
                                                                                                                                                                                                                                                                                                                                                                                                          outline: 2px solid #3D8BFD;
                                                                                                                                                                                                                                                                                                                                                                                                            outline-offset: 3px;
                                                                                                                                                                                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                                                                                                                                                                                            .btn:focus-visible {
                                                                                                                                                                                                                                                                                                                                                                                                              outline: 2px solid #3D8BFD;
                                                                                                                                                                                                                                                                                                                                                                                                                outline-offset: 3px;
                                                                                                                                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                                                                                                                                @media (max-width: 480px) {
                                                                                                                                                                                                                                                                                                                                                                                                                  :root {
                                                                                                                                                                                                                                                                                                                                                                                                                      --item-h:       46px;
                                                                                                                                                                                                                                                                                                                                                                                                                          --accent-bar-w: 32px;
                                                                                                                                                                                                                                                                                                                                                                                                                              --connector-w:  11px;
                                                                                                                                                                                                                                                                                                                                                                                                                                  --col-gap:      36px;
                                                                                                                                                                                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                                                                                                                                                                                      .choice-item .label, .match-item .label { font-size: .8rem; }
                                                                                                                                                                                                                                                                                                                                                                                                                                      }