:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box;margin:0;padding:0}body{min-width:320px;min-height:100vh}.app{max-width:640px;margin:0 auto;min-height:100vh}.app-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;height:3.25rem;padding:0 1rem;background:#1a1a1a;border-bottom:1px solid #333}.app-header h1{margin:0;font-size:1.35rem;font-weight:700;letter-spacing:-.02em;color:#fff}.user-info{display:flex;align-items:center;gap:.75rem;font-size:.75rem;color:#9ca3af}.btn-logout{background:none;border:1px solid #374151;color:#9ca3af;padding:.3rem .6rem;border-radius:4px;font-size:.7rem;cursor:pointer;transition:all .15s}.btn-logout:hover{border-color:#6b7280;color:#d1d5db}.app-main{padding:0}.games-feed{display:flex;flex-direction:column}.date-section{position:sticky;top:3.25rem;z-index:10;padding:.5rem 1rem;background:#1a1a1a;border-bottom:1px solid #333;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#6b7280}.date-section.today{color:#60a5fa;border-left:3px solid #3b82f6}.game-row{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-bottom:1px solid rgba(255,255,255,.06);transition:background .15s;min-height:44px;cursor:pointer}.game-row:hover{background:#ffffff0a}.game-row:active{background:#ffffff0f}.sport-pill{display:inline-block;padding:.125rem .4rem;border-radius:3px;font-size:.6rem;font-weight:600;color:#fff;white-space:nowrap;flex-shrink:0;text-transform:uppercase;letter-spacing:.03em}.gender-level{font-size:.7rem;color:#6b7280;flex-shrink:0}.game-main-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;color:#e5e7eb}.game-row-right{display:flex;align-items:center;gap:.4rem;flex-shrink:0;margin-left:auto}.game-time{font-size:.8rem;color:#6b7280}.score-inline{font-size:.8rem;font-weight:600;color:#f3f4f6;font-variant-numeric:tabular-nums}.wl-badge{display:inline-block;padding:.1rem .3rem;border-radius:3px;font-size:.6rem;font-weight:700;text-transform:uppercase}.wl-badge.w{background:#10b981;color:#fff}.wl-badge.l{background:#ef4444;color:#fff}.btn-write-article{background:none;border:none;color:#f97316;font-size:.9rem;cursor:pointer;padding:.15rem .3rem;border-radius:3px;transition:background .15s;line-height:1}.btn-write-article:hover{background:#f9731626}.no-games{color:#6b7280;text-align:center;padding:3rem 1rem;font-size:.9rem}.login-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;text-align:center}.login-screen h1{font-size:2.5rem;font-weight:700;margin-bottom:.5rem;letter-spacing:-.03em}.login-screen p{color:#9ca3af;margin-bottom:2rem}.btn-login{background:#3b82f6;color:#fff;padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:background .2s}.btn-login:hover{background:#2563eb}.loading{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:3rem;color:#9ca3af;font-size:.9rem}.error{text-align:center;padding:2rem;color:#ef4444;font-size:.9rem}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{display:flex;align-items:center;gap:.5rem}.error-message{color:#ef4444;background:#ef44441a;padding:.75rem;border-radius:6px;margin-bottom:1rem;font-size:.9rem}.btn-primary,.btn-secondary{padding:.5rem 1rem;border:none;border-radius:6px;font-size:.9rem;cursor:pointer;transition:all .2s}.btn-primary{background:#10b981;color:#fff}.btn-primary:hover:not(:disabled){background:#059669}.btn-secondary{background:#4b5563;color:#fff}.btn-secondary:hover:not(:disabled){background:#6b7280}button:disabled{opacity:.6;cursor:not-allowed}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;padding:1rem;z-index:100}.modal{background:#1f2937;border-radius:12px;padding:1.5rem;width:100%;max-width:500px;max-height:90vh;overflow-y:auto}.modal-large{max-width:800px}.modal h2{margin:0 0 1.25rem;color:#f3f4f6;font-size:1.35rem}.form-row{display:flex;gap:1rem;margin-bottom:1rem}.form-row label{flex:1;display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;color:#9ca3af}.form-row input,.form-row select,.form-row textarea{padding:.5rem;border:1px solid #4b5563;border-radius:6px;background:#374151;color:#fff;font-size:.9rem}.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:#3b82f6}label.full-width{margin-bottom:1rem;display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;color:#9ca3af}label.full-width textarea{padding:.5rem;border:1px solid #4b5563;border-radius:6px;background:#374151;color:#fff;font-size:.9rem;resize:vertical}.form-actions{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.25rem}.btn-article-submit{background:linear-gradient(135deg,#f97316,#14b8a6);color:#fff;padding:.5rem 1rem;font-size:.9rem;border:none;border-radius:6px;cursor:pointer;transition:all .2s;font-weight:500}.btn-article-submit:hover:not(:disabled){background:linear-gradient(135deg,#ea580c,#0d9488)}.article-initial,.article-editing,.article-submitting,.article-success{display:flex;flex-direction:column;gap:1rem}.game-summary{background:#374151;border-radius:8px;padding:1rem}.game-summary h3{margin:0 0 .75rem;color:#f3f4f6;font-size:1rem}.summary-details p{margin:.25rem 0;color:#d1d5db;font-size:.9rem}.summary-details p strong{color:#f3f4f6}.paragraph-selector{display:flex;flex-direction:column;gap:.5rem}.paragraph-selector>label{font-size:.85rem;color:#9ca3af}.paragraph-buttons{display:flex;gap:.5rem}.paragraph-btn{width:40px;height:40px;border:2px solid #4b5563;border-radius:8px;background:#374151;color:#d1d5db;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.paragraph-btn:hover{border-color:#6b7280;background:#4b5563}.paragraph-btn.active{border-color:#f97316;background:#f9731633;color:#f97316}.instructions-field label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;color:#9ca3af}.instructions-field textarea{padding:.5rem;border:1px solid #4b5563;border-radius:6px;background:#374151;color:#fff;font-size:.9rem;resize:vertical}.instructions-field textarea:focus{outline:none;border-color:#f97316}.article-title-input label,.article-subtitle-input label,.article-body-input label,.article-author label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;color:#9ca3af}.article-title-input input,.article-subtitle-input input{padding:.5rem;border:1px solid #4b5563;border-radius:6px;background:#374151;color:#fff;font-size:.9rem}.article-title-input input{font-size:1.1rem;font-weight:600}.article-title-input input:focus,.article-subtitle-input input:focus{outline:none;border-color:#f97316}.article-textarea{padding:.75rem;border:1px solid #4b5563;border-radius:6px;background:#374151;color:#fff;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem;line-height:1.5;resize:vertical;min-height:250px}.article-textarea:focus{outline:none;border-color:#f97316}.article-author select{padding:.5rem;border:1px solid #4b5563;border-radius:6px;background:#374151;color:#fff;font-size:.9rem}.article-author select:focus{outline:none;border-color:#f97316}.article-image label{font-size:.85rem;color:#9ca3af;margin-bottom:.35rem;display:block}.article-submitting{display:flex;align-items:center;justify-content:center;padding:3rem}.article-success{text-align:center;padding:1rem}.success-tags{color:#9ca3af;font-size:.85rem}.image-upload-section label{display:block;font-size:.85rem;color:#9ca3af;margin-bottom:.35rem}.image-drop-zone{border:2px dashed #4b5563;border-radius:8px;overflow:hidden;transition:all .2s;background:#1f2937}.image-drop-zone.dragging{border-color:#3b82f6;background:#3b82f61a}.image-drop-zone.has-image{border-style:solid;border-color:#374151}.drop-zone-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;cursor:pointer}.drop-zone-content input[type=file]{display:none}.drop-icon{font-size:2.5rem;margin-bottom:.5rem}.drop-text{font-size:.9rem;color:#9ca3af;text-align:center}.image-preview{position:relative}.image-preview img{width:100%;height:200px;object-fit:cover;display:block}.remove-image-btn{position:absolute;top:.5rem;right:.5rem;background:#000000b3;color:#fff;border:none;border-radius:4px;padding:.35rem .75rem;font-size:.8rem;cursor:pointer;transition:background .2s}.remove-image-btn:hover{background:#ef4444e6}.input-divider{display:flex;align-items:center;gap:1rem;color:#6b7280;font-size:.85rem}.input-divider:before,.input-divider:after{content:"";flex:1;height:1px;background:#4b5563}.input-divider span{white-space:nowrap}.success-icon{width:60px;height:60px;background:#10b981;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 1rem}.success-link{display:inline-block;margin:1rem 0;padding:.5rem 1rem;background:#374151;color:#f97316;text-decoration:none;border-radius:6px;font-size:.9rem;transition:background .2s}.success-link:hover{background:#4b5563}.btn-new-post{background:none;border:1px solid #374151;color:#9ca3af;width:1.75rem;height:1.75rem;border-radius:6px;font-size:1.1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;margin-left:.75rem}.btn-new-post:hover{border-color:#f97316;color:#f97316;background:#f973161a}.context-images{display:flex;gap:.5rem;overflow-x:auto;padding:.5rem 0;margin-top:.5rem}.context-thumb{position:relative;flex-shrink:0;width:72px;height:72px;border-radius:6px;overflow:hidden}.context-thumb img{width:100%;height:100%;object-fit:cover;display:block}.context-thumb-remove{position:absolute;top:2px;right:2px;background:#000000b3;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:.75rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.context-thumb-remove:hover{background:#ef4444e6}.dateline-field{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#9ca3af}.dateline-field label{flex-shrink:0}.dateline-field input{flex:1;padding:.4rem .5rem;border:1px solid #4b5563;border-radius:6px;background:#374151;color:#fff;font-size:.85rem}.dateline-field input:focus{outline:none;border-color:#f97316}@media (max-width: 600px){.modal{padding:1rem;margin:.5rem}.form-row{flex-direction:column;gap:.75rem}.user-info span{display:none}}