*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background-color:#f5f5f5;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}#app{flex-direction:column;justify-content:center;max-width:600px;min-height:100vh;margin:0 auto;padding:1rem;display:flex}.screen{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 6px #0000001a}h1{text-align:center;color:#2c3e50;margin-bottom:2rem;font-size:2rem}h2{color:#34495e;margin-bottom:1rem;font-size:1.2rem}.deck-section,.mode-section{border-bottom:1px solid #eee;margin-bottom:2rem;padding-bottom:1.5rem}.deck-section:last-child,.mode-section:last-child{border-bottom:none;margin-bottom:0}.help-link{color:#7f8c8d;margin-left:.5rem;font-size:.9rem}.help-link a{color:#3498db;font-weight:700;text-decoration:none}.help-link a:hover{color:#2980b9;text-decoration:underline}.help-content{background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;margin-top:1rem;padding:.75rem;font-size:.85rem;line-height:1.3}.help-content h3{color:#2c3e50;margin:0 0 .5rem;font-size:.95rem}.help-content h4{color:#2c3e50;margin:.75rem 0 .3rem;font-size:.85rem}.help-content p{margin:.3rem 0}.help-content code{color:#495057;background:#e9ecef;border-radius:3px;padding:.2rem .4rem;font-family:Courier New,monospace;font-size:.8rem}.code-block{color:#ecf0f1;background:#2c3e50;border-radius:4px;margin:.4rem 0;padding:.5rem;font-family:Courier New,monospace;font-size:.75rem;overflow-x:auto}.code-block div{white-space:pre}input[type=file]{background:#fafafa;border:2px dashed #ddd;border-radius:8px;width:100%;margin-bottom:1rem;padding:.75rem}button{color:#fff;cursor:pointer;background:#3498db;border:none;border-radius:6px;width:100%;padding:.75rem 1.5rem;font-size:1rem;transition:background-color .2s}button:hover:not(:disabled){background:#2980b9}button:disabled{cursor:not-allowed;background:#bdc3c7}.loading-progress{background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;margin-top:1rem;padding:1rem}.progress-text{text-align:center;color:#2c3e50;margin-bottom:.75rem;font-weight:600}.progress-bar{background:#e9ecef;border-radius:4px;width:100%;height:8px;margin-bottom:.5rem;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#3498db,#2980b9);border-radius:4px;width:0%;height:100%;transition:width .3s}.progress-details{text-align:center;color:#7f8c8d;font-size:.85rem}.progress-overlay{z-index:1000;background:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.progress-overlay-content{background:#fff;border-radius:12px;min-width:300px;max-width:90%;padding:2rem;box-shadow:0 8px 32px #0000004d}label{cursor:pointer;border-radius:4px;margin-bottom:.5rem;padding:.5rem;transition:background-color .2s;display:block}label:hover{background:#f8f9fa}input[type=radio]{margin-right:.5rem}#existing-decks-list{list-style:none}.deck-item{background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;justify-content:space-between;align-items:center;margin-bottom:.5rem;padding:.75rem;display:flex}.deck-item:hover{background:#e9ecef}.deck-name{cursor:pointer;text-overflow:ellipsis;white-space:nowrap;flex:1;margin-right:.75rem;overflow:hidden}.delete-deck-btn{color:#fff;cursor:pointer;background:#e74c3c;border:none;border-radius:3px;flex-shrink:0;width:auto;min-width:45px;max-width:60px;padding:.2rem .4rem;font-size:.7rem}.delete-deck-btn:hover{background:#c0392b}.game-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}#exit-game-btn{background:#95a5a6;width:auto;padding:.5rem 1rem}#exit-game-btn:hover{background:#7f8c8d}#deck-name{text-align:center;flex:1;margin:0}#counter{color:#7f8c8d;min-width:fit-content;font-weight:700}.card{text-align:center}.question{justify-content:center;align-items:center;min-height:3rem;margin-bottom:1.5rem;font-size:1.2rem;display:flex}.image-container img{border-radius:8px;max-width:100%;height:auto;box-shadow:0 2px 8px #0000001a}.answer{background:#e8f5e8;border-left:4px solid #27ae60;border-radius:8px;justify-content:center;align-items:center;min-height:3rem;margin:1.5rem 0;padding:1rem;font-size:1.2rem;display:flex}#reveal-btn{background:#f39c12;margin-bottom:1rem}#reveal-btn:hover{background:#e67e22}#next-btn{background:#27ae60}#next-btn:hover{background:#229954}#end-game-buttons{gap:1rem;margin-top:1rem;display:flex}#quit-btn{background:#95a5a6;flex:1}#quit-btn:hover{background:#7f8c8d}#reset-btn{background:#3498db;flex:1}#reset-btn:hover{background:#2980b9}@media (width>=768px){#app{padding:2rem}.screen{padding:3rem}h1{font-size:2.5rem}.game-header{flex-wrap:nowrap}#exit-game-btn{order:-1}}.preset-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}#back-to-decks-btn{background:#95a5a6;width:auto;padding:.5rem 1rem}#back-to-decks-btn:hover{background:#7f8c8d}#preset-deck-name{text-align:center;flex:1;margin:0}.preset-section{text-align:center}.preset-section h3{color:#34495e;margin-bottom:1.5rem;font-size:1.1rem}#preset-options{text-align:left;margin-bottom:1.5rem}.preset-section .mode-section{text-align:left;margin-bottom:2rem}.preset-section .mode-section h3{color:#34495e;margin-bottom:1rem;font-size:1.1rem}.preset-option{cursor:pointer;border:1px solid #e9ecef;border-radius:6px;align-items:center;margin-bottom:.75rem;padding:.75rem;transition:background-color .2s;display:flex}.preset-option:hover{background:#f8f9fa}.preset-option input[type=radio]{margin-right:.75rem}.preset-name{flex:1;font-weight:500}#start-game-btn{background:#27ae60;width:100%;max-width:200px;margin:0 auto}#start-game-btn:hover{background:#229954}.loading-spinner{z-index:10;background:#ffffffe6;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;padding:2rem;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.spinner{border:4px solid #f3f3f3;border-top-color:#3498db;border-radius:50%;width:40px;height:40px;margin-bottom:1rem;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{color:#666;text-align:center;font-size:.9rem}.image-container{text-align:center;justify-content:center;align-items:center;margin:1.5rem 0;display:flex;position:relative}@media (width>=1024px){button{width:auto;min-width:150px}.deck-section button{width:100%}}