*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0d1117;--bg-card:#161b22;--bg-card-hover:#1c2330;--border:#30363d;--accent:#58a6ff;--accent-dim:#1f6feb;--green:#3fb950;--red:#f85149;--yellow:#d29922;--text:#e6edf3;--text-muted:#8b949e;--radius:12px;--shadow:0 4px 24px #0006;--transition:.2s ease}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}.app{flex-direction:column;max-width:960px;min-height:100vh;margin:0 auto;padding:0 16px;display:flex}.app-header{border-bottom:1px solid var(--border);margin-bottom:24px;padding:20px 0 12px}.header-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.app-title{color:var(--text);letter-spacing:-.5px;font-size:clamp(1.4rem,4vw,2rem);font-weight:700}.title-icon{margin-right:8px}.app-subtitle{color:var(--text-muted);margin-top:6px;font-size:.9rem}.header-actions{flex-wrap:wrap;gap:8px;display:flex}button{cursor:pointer;border:none;font-family:inherit}.btn-secondary{background:var(--bg-card);color:var(--text-muted);border:1px solid var(--border);transition:var(--transition);border-radius:8px;padding:8px 14px;font-size:.85rem;font-weight:500}.btn-secondary:hover{background:var(--bg-card-hover);color:var(--text);border-color:var(--accent)}.btn-reset{color:var(--yellow)}.btn-reset:hover{border-color:var(--yellow)}.btn-submit{color:#fff;letter-spacing:.3px;transition:var(--transition);background:linear-gradient(135deg,#1f6feb,#388bfd);border-radius:10px;padding:14px 36px;font-size:1rem;font-weight:600;box-shadow:0 2px 12px #1f6feb66}.btn-submit:hover{background:linear-gradient(135deg,#388bfd,#58a6ff);transform:translateY(-1px);box-shadow:0 4px 20px #58a6ff80}.btn-submit:active{transform:translateY(0)}.btn-share{color:#fff;transition:var(--transition);background:linear-gradient(135deg,#238636,#2ea043);border-radius:10px;padding:12px 28px;font-size:.95rem;font-weight:600;box-shadow:0 2px 12px #23863666}.btn-share:hover{background:linear-gradient(135deg,#2ea043,#3fb950);transform:translateY(-1px);box-shadow:0 4px 20px #3fb95066}.app-main{flex:1}.game-board{padding-bottom:40px}.instruction{text-align:center;color:var(--text-muted);margin-bottom:20px;font-size:.95rem}.cards-container{flex-direction:column;gap:0;display:flex}@media (width>=640px){.cards-container{flex-flow:row;gap:0}}.drop-zone-group{display:contents}.drop-zone{z-index:10;pointer-events:none;border-radius:var(--radius);height:96px;transition:background-color var(--transition);flex-shrink:0;justify-content:center;align-items:center;margin-top:-46px;margin-bottom:-46px;display:flex;position:relative}@media (width>=640px){.drop-zone{flex-direction:column;flex:0 0 96px;width:96px;height:auto;margin:0 -46px}}.drop-zone--dragging{outline-offset:-3px;background:#58a6ff14;outline:1px dashed #58a6ff59}.drop-zone--active{background:#58a6ff47;outline:none;box-shadow:inset 0 0 0 2px #58a6ffb3}.drop-zone-indicator{background:var(--accent);opacity:0;width:70%;height:4px;transition:opacity var(--transition), transform var(--transition);pointer-events:none;border-radius:2px;transform:scaleX(.4)}@media (width>=640px){.drop-zone-indicator{width:4px;height:70%;transform:scaleY(.4)}}.drop-zone--dragging .drop-zone-indicator{opacity:.35;transform:scaleX(.6)}@media (width>=640px){.drop-zone--dragging .drop-zone-indicator{transform:scaleY(.6)}}.drop-zone--active .drop-zone-indicator{opacity:1;transform:scaleX(1)}@media (width>=640px){.drop-zone--active .drop-zone-indicator{transform:scaleY(1)}}.card{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;transition:border-color var(--transition), transform var(--transition), box-shadow var(--transition);min-width:0;box-shadow:var(--shadow);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.card:hover{border-color:var(--accent-dim);box-shadow:0 6px 32px #00000080}.card:active{cursor:grabbing}.card.dragging{opacity:.4;border-color:var(--accent);transform:scale(.97)}.card-image{object-fit:cover;background:var(--border);width:100%;height:140px;display:block}@media (width>=640px){.card-image{height:200px}}.card-body{flex:1;padding:10px 12px 8px}.card-title{color:var(--text);margin-bottom:4px;font-size:.85rem;font-weight:600;line-height:1.35}.card-drag-handle{color:var(--border);pointer-events:none;font-size:1rem;line-height:1;position:absolute;bottom:8px;right:8px}@media (width<=639px){.card{flex-direction:row}.card-image{flex-shrink:0;width:88px;height:80px}.card-body{flex-direction:column;justify-content:center;min-height:80px;padding:8px 36px 8px 10px;display:flex}.card-drag-handle{top:50%;bottom:auto;transform:translateY(-50%)}}.submit-area{justify-content:center;margin-top:28px;display:flex}.result-screen{padding-bottom:60px}.score-header{text-align:center;background:linear-gradient(#1f6feb1f 0%,#0000 100%);border:1px solid #58a6ff33;border-radius:16px;margin-bottom:28px;padding:28px 20px 24px}.score-emoji{margin-bottom:4px;font-size:2.5rem}.score-number{color:var(--accent);letter-spacing:-2px;font-size:clamp(3rem,10vw,5rem);font-weight:800;line-height:1}.score-denom{color:var(--text-muted);margin-bottom:6px;font-size:1.2rem}.score-tier{color:var(--text);margin-bottom:10px;font-size:1.3rem;font-weight:600}.score-stats{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px;display:flex}.score-pairs-badge{color:var(--green);background:#3fb95026;border:1px solid #3fb9504d;border-radius:20px;align-items:center;gap:4px;padding:4px 12px;font-size:.82rem;font-weight:600;display:inline-flex}.score-pairs-dots{align-items:center;gap:3px;margin-right:4px;display:inline-flex}.score-pairs-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.score-pairs-dot--correct{background:var(--green)}.score-pairs-dot--wrong{background:var(--red)}.section-heading{text-transform:uppercase;letter-spacing:.8px;text-align:center;border-radius:8px;margin-bottom:16px;padding:6px 12px;font-size:.85rem;font-weight:700}.your-order-heading{color:#f88379;background:#f851491f;border:1px solid #f8514940}.correct-order-heading{color:var(--green);background:#3fb9501f;border:1px solid #3fb95040}.timeline-comparison{grid-template-columns:1fr 1fr;align-items:start;gap:20px;margin-bottom:40px;display:grid}@media (width<=639px){.timeline-comparison{grid-template-columns:1fr}}.timeline-column{min-width:0}.player-order-list{flex-direction:column;align-items:stretch;display:flex}.player-order-group{flex-direction:column;align-items:center;display:flex}.result-card{background:var(--bg-card);border:1px solid var(--border);width:100%;box-shadow:var(--shadow);border-radius:12px;align-items:center;gap:12px;padding:10px 14px;display:flex}.result-card-img{object-fit:cover;background:var(--border);border-radius:8px;flex-shrink:0;width:64px;height:50px}.result-card-body{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.result-card-year{color:var(--accent);background:#58a6ff26;border-radius:10px;align-self:flex-start;padding:2px 8px;font-size:.72rem;font-weight:700;display:inline-block}.result-card-title{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:.88rem;font-weight:600;line-height:1.3;overflow:hidden}.result-card-hint{font-size:.7rem;font-weight:500;line-height:1}.hint-correct{color:var(--green)}.hint-wrong{color:var(--text-muted)}.pair-result-row{border-radius:20px;align-items:center;gap:8px;margin:4px 0;padding:8px 20px;font-size:.82rem;font-weight:600;display:flex}.pair-result-row--correct{color:var(--green);background:#3fb9501a;border:1px solid #3fb95040}.pair-result-row--wrong{color:var(--red);background:#f8514914;border:1px solid #f8514933;align-items:flex-start}.pair-result-row--partial{color:var(--yellow);background:#d2992214;border:1px solid #d2992240;align-items:flex-start}.pair-result-fire{font-size:.9rem;line-height:1}.pair-result-points{color:var(--green);font-size:1rem;font-weight:700}.pair-result-label{color:inherit;font-size:.78rem;font-weight:500}.pair-result-row--correct .pair-result-label{color:var(--green)}.pair-result-correct-text{color:var(--green);opacity:.7;font-size:.72rem;font-weight:400}.pair-result-icon{font-size:.9rem;line-height:1}.pair-result-number{opacity:.55;margin-right:2px;font-size:.68rem;font-weight:700}.result-card-correct-pos{color:var(--text-muted);font-size:.7rem;font-weight:500;line-height:1}.result-card-correct-pos.hint-correct{color:var(--green)}.correct-timeline-section{margin-bottom:40px}.correct-timeline-list{flex-direction:column;align-items:stretch;display:flex}.correct-timeline-group{flex-direction:column;align-items:center;display:flex}.correct-timeline-connector{background:#3fb9504d;border-radius:1px;width:2px;height:16px;margin:2px 0}.correct-timeline-item{background:#3fb9500d;border:1px solid #3fb95033;border-radius:12px;align-items:center;gap:12px;width:100%;padding:10px 14px;display:flex}.correct-timeline-img{object-fit:cover;background:var(--border);border-radius:8px;flex-shrink:0;width:56px;height:44px}.correct-timeline-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.correct-timeline-year{color:var(--accent);background:#58a6ff26;border-radius:10px;align-self:flex-start;padding:2px 8px;font-size:.7rem;font-weight:700;display:inline-block}.correct-timeline-title{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;font-weight:600;line-height:1.3;overflow:hidden}.correct-timeline-desc{color:var(--text-muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.68rem;line-height:1.4;display:-webkit-box;overflow:hidden}.wiki-link{color:var(--accent);opacity:.7;align-self:flex-start;font-size:.65rem;text-decoration:none;transition:opacity .15s}.wiki-link:hover{opacity:1;text-decoration:underline}.correct-timeline-arrow{color:var(--border);padding:2px 0;font-size:1rem;line-height:1}.scoring-note{color:var(--text-muted);background:#58a6ff12;border:1px solid #58a6ff2e;border-radius:10px;margin-top:14px;padding:10px 14px;font-size:.76rem;line-height:1.6}.scoring-note strong{color:var(--accent)}.result-actions{flex-direction:column;align-items:center;gap:16px;margin-top:20px;display:flex}.tomorrow-note{color:var(--text-muted);font-size:.9rem}.app-footer{border-top:1px solid var(--border);text-align:center;color:var(--text-muted);margin-top:24px;padding:20px 0;font-size:.82rem}