@charset "UTF-8";.chronology-feedback-overlay{position:fixed;inset:var(--space-none);z-index:9999;display:flex;align-items:center;justify-content:center;background:#000c}.chronology-feedback-overlay.hidden{display:none;visibility:hidden;opacity:0}@media (max-width: 39.9375em){.chronology-feedback-overlay{padding:var(--space-xs)}}.overlay-backdrop{position:absolute;inset:var(--space-none)}.modal-content{position:relative;z-index:10000;margin:var(--space-sm);padding:var(--space-lg);max-width:500px;max-height:85vh;border-radius:var(--radius-xl);background:#1f2937;box-shadow:0 25px 50px -12px #00000080;display:flex;flex-direction:column;min-height:0}@media (max-width: 23.4375em){.modal-content{margin:var(--space-xs);padding:var(--space-md);max-height:90vh}}.close-button{display:flex;align-items:center;justify-content:center;align-self:flex-end;margin-bottom:var(--space-sm);height:var(--touch-target-enhanced);width:var(--touch-target-enhanced);border-radius:var(--radius-full);background:var(--bg-tertiary);border:var(--border-width-thick) solid var(--border-primary);cursor:pointer;transition:background-color var(--transition-normal)}.close-button:hover{background:var(--bg-primary)}.close-button:focus-visible{outline:var(--focus-outline);outline-offset:var(--focus-ring-offset)}.close-icon{height:var(--icon-size-sm);width:var(--icon-size-sm);color:var(--text-secondary)}@media (min-width: 48em){.close-icon{height:var(--icon-size-md);width:var(--icon-size-md)}}.modal-title{margin-bottom:var(--space-md);text-align:center;font-size:var(--text-xl);font-weight:var(--font-bold);color:#f9fafb;line-height:var(--leading-tight)}.modal-content-text{flex:1;overflow-y:auto;padding:var(--space-xs);max-height:60vh;color:var(--text-secondary);line-height:var(--leading-relaxed);scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}.modal-content-text>*{margin-bottom:var(--space-sm)}.modal-content-text>*:last-child{margin-bottom:0}.modal-content-text::-webkit-scrollbar{width:var(--scrollbar-width)}.modal-content-text::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:var(--scrollbar-radius)}.modal-content-text::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--scrollbar-radius)}.button-container{margin-top:var(--space-sm);display:flex;justify-content:center;gap:var(--space-sm)}.primary-button,.secondary-button{min-height:var(--touch-target-enhanced);border-radius:var(--radius-lg);padding:var(--space-sm) var(--space-md);font-weight:var(--font-bold);font-size:var(--text-sm);border:none;cursor:pointer;transition:background var(--transition-normal)}.primary-button:focus-visible,.secondary-button:focus-visible{outline:var(--focus-outline);outline-offset:var(--focus-ring-offset)}.primary-button{background:#8b5cf6;color:#fff;border:2px solid #8b5cf6;transition:all .2s ease}.primary-button:hover{background:#7c3aed;border-color:#7c3aed;transform:translateY(-1px)}.primary-button:active{transform:translateY(0)}.secondary-button{background:var(--color-warning-primary);color:var(--color-white);border:var(--border-width-thick) solid transparent;box-shadow:var(--shadow-md)}.secondary-button:hover{background:var(--color-warning-secondary);transform:translateZ(0) scale(var(--scale-focus)) translateY(var(--animation-y-offset-small));box-shadow:var(--shadow-xl)}.secondary-button:hover:before{display:none}.hidden{display:none;visibility:hidden;opacity:0}.feedback-correct{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);color:#065f46;font-weight:var(--font-bold);font-size:var(--text-lg);margin-bottom:var(--space-md);padding:var(--space-md);background:#d1fae5;border:2px solid #10b981;border-radius:var(--radius-lg)}.feedback-incorrect{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);color:#7f1d1d;font-weight:var(--font-bold);font-size:var(--text-lg);margin-bottom:var(--space-md);padding:var(--space-md);background:#fecaca;border:2px solid #ef4444;border-radius:var(--radius-lg)}@media (prefers-color-scheme: dark){.feedback-correct{background:var(--bg-success-dark);border-color:var(--border-success-dark);color:var(--text-success-dark);box-shadow:var(--shadow-lg)}.feedback-incorrect{background:var(--bg-error-dark);border-color:var(--border-error-dark);color:var(--text-error-dark);box-shadow:var(--shadow-lg)}}.correct-order-heading{font-size:var(--text-lg);font-weight:var(--font-bold);margin-bottom:var(--space-sm);color:#f9fafb;display:flex;align-items:center;justify-content:center;gap:var(--space-sm);text-align:center}.correct-order-heading:before{content:"✓";font-size:var(--text-xl);color:#10b981}.correct-order-container{margin:var(--space-md) 0 0;padding:var(--space-md);background:#374151;border:2px solid #10b981;border-radius:var(--radius-lg);flex-shrink:0}.correct-order-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-sm)}.correct-order-list div{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm);background:#1f2937;border:1px solid #4b5563;border-radius:var(--radius-md);color:#f9fafb;font-weight:var(--font-medium)}@media (max-width: 23.4375em){.correct-order-list div{flex-direction:column;text-align:center;gap:var(--space-sm)}}.order-number{display:flex;align-items:center;justify-content:center;width:var(--space-2xl);height:var(--space-2xl);background:#10b981;color:#fff;border-radius:var(--radius-full);font-weight:var(--font-bold);font-size:var(--text-sm);flex-shrink:0}.song-info{flex:1;font-size:var(--text-sm);line-height:var(--leading-relaxed);font-weight:var(--font-medium)}.feedback-message{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);flex-shrink:0}.feedback-icon{font-size:var(--text-xl)}.feedback-text{font-size:var(--text-base);font-weight:var(--font-bold);text-align:center;line-height:var(--leading-relaxed)}.game-stats{margin:var(--space-sm) 0;padding:var(--space-sm);background:var(--bg-tertiary);border:var(--border-width-thick) solid var(--border-secondary);border-radius:var(--radius-lg);display:grid;grid-template-columns:repeat(auto-fit,minmax(6rem,1fr));gap:var(--space-sm)}.stat-item{text-align:center;padding:var(--space-xs);background:var(--bg-primary);border-radius:var(--radius-md);border:var(--border-width-thin) solid var(--border-primary)}.stat-label{display:block;font-size:var(--text-xs);color:var(--text-secondary);margin-bottom:var(--space-xs);font-weight:var(--font-medium);text-transform:uppercase}.stat-value{display:block;font-size:var(--text-lg);color:var(--text-primary);font-weight:var(--font-bold);line-height:var(--leading-none)}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}.feedback-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-sm);margin-top:var(--space-sm);padding:var(--space-md);background:#374151;border-radius:var(--radius-lg);border:1px solid #4b5563}.feedback-stats .stat-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);padding:var(--space-sm);border-radius:var(--radius-md);background:#1f2937;border:1px solid #4b5563}.feedback-stats .stat-label{font-size:var(--text-xs);color:#9ca3af;font-weight:var(--font-medium);text-transform:uppercase}.feedback-stats .stat-value{font-size:var(--text-lg);color:#f9fafb;font-weight:var(--font-bold)}.user-order-container{margin:var(--space-md) 0 0;padding:var(--space-md);background:#374151;border:2px solid #ef4444;border-radius:var(--radius-lg);flex-shrink:0}.user-order-heading{font-size:var(--text-lg);font-weight:var(--font-bold);margin-bottom:var(--space-sm);color:#f9fafb;display:flex;align-items:center;justify-content:center;gap:var(--space-sm);text-align:center}.user-order-heading:before{content:"✖";font-size:var(--text-xl);color:#ef4444}.user-order-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-sm)}.user-order-list div{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm);background:#1f2937;border:1px solid #4b5563;border-radius:var(--radius-md);color:#f9fafb;font-weight:var(--font-medium)}.user-order-list div.correct{border-color:var(--border-success);background:var(--bg-success-aaa)}.user-order-list div.incorrect{border-color:var(--border-error);background:var(--bg-error-aaa)}@media (max-width: 23.4375em){.user-order-list div{flex-direction:column;text-align:center;gap:var(--space-sm)}}.user-order-list .order-number{display:flex;align-items:center;justify-content:center;width:var(--space-2xl);height:var(--space-2xl);border-radius:var(--radius-full);font-weight:var(--font-bold);font-size:var(--text-sm);flex-shrink:0}.user-order-list .order-number.correct{background:var(--color-success-primary);color:var(--color-white)}.user-order-list .order-number.incorrect{background:var(--color-error-primary);color:var(--color-white)}.user-order-list .song-info{flex:1;font-size:var(--text-sm);line-height:var(--leading-relaxed);font-weight:var(--font-medium)}.user-order-list .status-icon{display:flex;align-items:center;justify-content:center;width:var(--space-lg);height:var(--space-lg);border-radius:var(--radius-full);font-weight:var(--font-bold);font-size:var(--text-sm);flex-shrink:0}.user-order-list .status-icon.correct{background:var(--bg-success-light);color:var(--text-success-dark)}.user-order-list .status-icon.incorrect{background:var(--bg-error-light);color:var(--text-error-dark)}.chronology-game{min-height:100vh;background:var(--bg-primary);color:var(--text-primary);padding:var(--space-xs);max-width:var(--container-xl);margin:0 auto;contain:layout style paint}.game-header{margin-bottom:var(--space-md);text-align:center;contain:layout style}.game-info{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);margin-top:var(--space-sm);flex-wrap:wrap;contain:layout style}.badge{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);background:var(--bg-secondary);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);border:var(--border-width-thin) solid var(--border-secondary);transition:all var(--transition-base);min-width:var(--stat-width-sm);contain:layout style paint}.badge__icon{width:var(--icon-size-sm);height:var(--icon-size-sm);color:var(--interactive-primary);flex-shrink:0;contain:layout style paint}.badge__text{font-weight:var(--font-medium);font-size:var(--text-md);white-space:nowrap;min-width:var(--coin-number-min-width);contain:layout style}.game-content{max-width:var(--container-md);margin:0 auto;width:var(--width-full);contain:layout style}.chronology-container{background:var(--card-bg);border-radius:var(--radius-lg);padding:var(--space-md);margin-bottom:var(--space-md);border:var(--border-width-thin) solid var(--card-border);min-height:var(--container-intrinsic-height-card);position:relative;box-shadow:var(--card-shadow);contain:layout style paint}.loading-placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;height:var(--container-intrinsic-height-component);color:var(--text-secondary);text-align:center;contain:layout style}.loading-placeholder p{margin-top:var(--space-sm);font-size:var(--text-sm);contain:layout style}.loading-icon{width:var(--icon-size-md);height:var(--icon-size-md);margin-bottom:var(--space-sm);animation:spin var(--animation-pulse-duration) linear infinite;color:var(--interactive-primary);contain:layout style paint}.chronology-item{display:flex;align-items:center;gap:var(--space-sm);background:var(--card-bg);border:var(--border-width-thick) solid var(--border-primary);border-radius:var(--radius-md);padding:var(--space-sm);margin-bottom:var(--space-sm);cursor:pointer;transition:all var(--transition-base);position:relative;box-shadow:var(--card-shadow);contain:layout style paint;min-height:var(--touch-target-standard)}.chronology-item:last-child{margin-bottom:0}.chronology-item:hover{border-color:var(--interactive-primary);box-shadow:var(--card-shadow-hover)}.chronology-item:focus{outline:none;border-color:var(--interactive-primary);box-shadow:var(--focus-ring)}.chronology-item:focus-visible{outline:3px solid var(--interactive-primary);outline-offset:2px}.chronology-item--selected{border-color:var(--interactive-primary);background:var(--bg-tertiary);box-shadow:var(--card-shadow-hover)}.chronology-item--selected .chronology-item__position{background:var(--interactive-secondary)}.chronology-item__position{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--interactive-primary);color:var(--color-white);border-radius:var(--radius-full);font-weight:var(--font-bold);font-size:var(--text-base);flex-shrink:0;transition:all var(--transition-base);border:var(--border-width-thin) solid transparent;contain:layout style paint}.chronology-item__content{flex:1;min-width:0;contain:layout style}.chronology-item__title{font-weight:var(--font-semibold);font-size:var(--text-lg);margin-bottom:var(--space-micro);color:var(--text-primary);line-height:var(--leading-tight);contain:layout style}.chronology-item__artist{color:var(--text-secondary);font-size:var(--text-xs);line-height:var(--leading-normal);font-weight:var(--font-normal);contain:layout style}.game-controls{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--space-md);width:var(--width-full);max-width:var(--container-sm);margin:0 auto;padding:var(--space-lg);background:linear-gradient(135deg,#ffffff1a,#ffffff0d);backdrop-filter:blur(var(--backdrop-blur)) saturate(180%);border-radius:var(--radius-xl);border:var(--border-width-thin) solid rgba(255,255,255,.2);box-shadow:var(--shadow-xl);contain:layout style paint}.move-buttons{display:flex;gap:var(--space-sm);justify-content:center;align-items:center;flex-wrap:wrap;width:var(--width-full);contain:layout style}.move-button{display:flex;align-items:center;gap:var(--space-sm);background:var(--bg-secondary);border:var(--border-width-thick) solid var(--border-secondary);border-radius:var(--radius-md);color:var(--text-primary);padding:var(--space-sm) var(--space-md);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-base);justify-content:center;min-width:var(--grid-min-width-sm);text-align:center;min-height:var(--touch-target-standard);font-size:var(--text-sm);contain:layout style paint}.move-button:not(:disabled):hover{background:var(--interactive-primary);color:var(--color-white);box-shadow:var(--card-shadow-hover)}.move-button:not(:disabled):active{box-shadow:var(--shadow-sm)}.move-button:disabled{background:var(--bg-tertiary);color:var(--text-disabled);opacity:var(--opacity-disabled);cursor:not-allowed}.move-button:focus{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}.move-button__icon{width:var(--icon-size-sm);height:var(--icon-size-sm);flex-shrink:0;contain:layout style paint}.submit-button{display:flex;align-items:center;gap:var(--space-sm);background:var(--btn-primary-bg);border:none;border-radius:var(--radius-md);color:var(--btn-primary-text);padding:var(--space-sm) var(--space-lg);font-weight:var(--font-semibold);font-size:var(--text-base);cursor:pointer;transition:all var(--transition-base);justify-content:center;min-width:var(--grid-min-width-md);text-align:center;min-height:var(--touch-target-standard);box-shadow:var(--shadow-md);contain:layout style paint}.submit-button:not(:disabled):hover{background:var(--btn-primary-hover);box-shadow:var(--card-shadow-hover)}.submit-button:not(:disabled):active{box-shadow:var(--shadow-sm)}.submit-button:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.submit-button:focus{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}.submit-button__icon{width:var(--icon-size-md);height:var(--icon-size-md);flex-shrink:0;contain:layout style paint}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:focus{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}:focus:not(:focus-visible){outline:none}:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}