*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#2c2c2c;background:#f5f0eb;justify-content:center;align-items:flex-start;min-height:100dvh;padding:2rem 1rem;font-family:system-ui,-apple-system,sans-serif;display:flex}#game,#leaderboard-page{width:100%;max-width:860px}h1{margin-bottom:.25rem;font-size:2rem}h2{text-transform:capitalize;margin-bottom:.5rem;font-size:1.4rem}.instruction{color:#666;margin-bottom:1rem}.card-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;margin:1rem 0 2rem;display:grid}.card{cursor:pointer;text-align:center;background:#fff;border:2px solid #ddd;border-radius:12px;justify-content:center;align-items:center;min-height:80px;padding:1rem;font-size:.9rem;font-weight:600;line-height:1.4;transition:border-color .15s,transform .15s,opacity .15s;display:flex}.card:hover:not(.disabled):not(.selected){border-color:#bbb;transform:translateY(-2px)}.card.selected{text-align:left;background:#fdf6f0;border-color:#e07b39;flex-direction:column;justify-content:flex-start;align-items:stretch}.card.disabled{opacity:.4;cursor:default}.card-nutrients{color:#777;margin-top:.4rem;font-size:.75rem;font-weight:400;line-height:1.5;display:none}.card.selected .card-nutrients{display:block}.budget-panel{background:#fff;border:1px solid #ddd;border-radius:12px;margin-bottom:1.5rem;padding:1rem 1.5rem}.budget-panel h3{color:#555;margin-bottom:.75rem;font-size:1rem}.budget-rows{flex-direction:column;gap:.5rem;display:flex}.budget-row{align-items:center;gap:.75rem;font-size:.85rem;display:flex}.budget-label{color:#888;min-width:5.5rem}.budget-bar-track{background:#eee;border-radius:4px;flex:1;height:10px;overflow:hidden}.budget-bar-fill{border-radius:4px;height:100%;transition:width .3s}.bar--green{background:#27ae60}.bar--amber{background:#e67e22}.bar--red{background:#e74c3c}.budget-value{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:#555;flex-shrink:0;width:7.5rem;font-size:.8rem}.budget-value--over{color:#e74c3c;font-weight:700}.budget-delta{color:#e74c3c;min-width:4.5rem;font-size:.75rem;font-weight:600;animation:1.4s forwards deltaFade}@keyframes deltaFade{0%{opacity:1}60%{opacity:1}to{opacity:0}}.picks-summary{margin-bottom:1.5rem}.picks-summary h3{color:#555;margin-bottom:.75rem;font-size:1rem}.picks-round{margin-bottom:1rem}.picks-round-label{text-transform:uppercase;letter-spacing:.05em;color:#aaa;margin-bottom:.4rem;font-size:.75rem;font-weight:600}.picks-row{gap:.75rem;display:flex}.pick-card{background:#fdf6f0;border:2px solid #e07b39;border-radius:12px;flex:1;padding:.75rem 1rem}.pick-title{margin-bottom:.35rem;font-size:.9rem;font-weight:600}.pick-nutrients{color:#777;font-size:.75rem;line-height:1.5}.result{text-align:center;padding:2rem 0}.result h2{margin-bottom:1rem;font-size:2rem}.result p{color:#555;margin-bottom:1.5rem}.btn{color:#fff;cursor:pointer;background:#e07b39;border:none;border-radius:8px;padding:.75rem 2rem;font-size:1rem;font-weight:600;transition:background .15s;display:inline-block}.btn:hover{background:#c96a2c}.result-heading--lose{color:#c0392b}.result .result-score{color:#666;margin-bottom:1.5rem;font-size:.9rem}.result-form{gap:.5rem;margin-bottom:1.5rem;display:flex}.result-name-input{border:1px solid #ccc;border-radius:8px;flex:1;padding:.5rem .75rem;font-family:inherit;font-size:1rem}.result-name-input:focus{border-color:#0000;outline:2px solid #e07b39}.btn--win{background:#27ae60}.btn--lose{background:#c0392b}.btn--win:hover{background:#219a52}.btn--lose:hover{background:#a93226}.btn:disabled{opacity:.6;cursor:not-allowed}.result-actions{justify-content:center;gap:.75rem;margin-top:.5rem;display:flex}.btn--secondary{color:#555;background:#f5f0eb;border:1px solid #ddd}.btn--secondary:hover{background:#ebe6e1}.leaderboard{text-align:left;margin:1rem 0 1.5rem}.leaderboard-table{border-collapse:collapse;width:100%;font-size:.9rem}.leaderboard-table td{border-bottom:1px solid #f0f0f0;padding:.4rem .5rem}.leaderboard-table td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:#555}.leaderboard-row--current{background:#f0fff4;font-weight:700}.leaderboard-row--current td:last-child{color:#27ae60}.leaderboard-divider td{text-align:center;color:#bbb;border-bottom:none;padding:.2rem 0;font-size:.8rem;font-style:italic}.leaderboard-empty{color:#999;text-align:center;padding:1rem 0;font-size:.9rem}
