:root{--bg-color: #0f172a;--card-bg: #1e293b;--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent-color: #3b82f6;--tier-s: #ff7f7f;--tier-a: #ffbf7f;--tier-b: #ffff7f;--tier-c: #7fff7f;--tier-d: #7f7fff;--radius: 12px}@keyframes gold-glow{0%{box-shadow:0 0 5px #fbbf2466}50%{box-shadow:0 0 20px #fbbf24cc,0 0 30px #d9770666}to{box-shadow:0 0 5px #fbbf2466}}@keyframes view-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}*{box-sizing:border-box;margin:0;padding:0}button,a,.nav-btn,.btn,.project-item,.tier-label,.bracket-option,.mashup-option,.ranking-preview-img{transition:all .2s cubic-bezier(.4,0,.2,1)}.view-container{background:#1e293b80;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:2rem;box-shadow:0 10px 30px #0003;animation:view-fade-in .4s ease-out}body{font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--bg-color);color:var(--text-primary);min-height:100vh}.app-layout{display:flex;min-height:100vh}.home-screen{padding:4rem 2rem;max-width:1400px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;animation:view-fade-in .6s cubic-bezier(.34,1.56,.64,1)}.home-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:3rem}.app-logo{font-size:2.2rem;font-weight:900;background:linear-gradient(135deg,#facc15,#f97316);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;letter-spacing:-.5px}.hero-section{text-align:center;max-width:700px;margin:2rem auto 4rem;animation:view-fade-in .8s cubic-bezier(.34,1.56,.64,1)}.hero-section h2{font-size:3.5rem;font-weight:800;line-height:1.1;margin-bottom:1.5rem;color:#fff}.hero-section p{font-size:1.25rem;color:var(--text-secondary);line-height:1.6}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem;align-items:stretch}.game-card{position:relative;display:flex;flex-direction:column;cursor:pointer;background:linear-gradient(145deg,#ffffff0f,#ffffff03);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:16px;overflow:hidden;box-shadow:0 10px 25px #0006;transition:all .3s cubic-bezier(.16,1,.3,1);border:1px solid rgba(255,255,255,.05)}.game-card:hover{transform:translateY(-8px);box-shadow:0 25px 40px #0009,0 0 0 1px #3b82f680;border-color:transparent;background:linear-gradient(145deg,#ffffff14,#ffffff05)}.game-card-img-wrap{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000}.game-card-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1)}.game-card:hover .game-card-img-wrap img{transform:scale(1.08)}.game-card-info{padding:1.25rem 1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;background:transparent;border-top:1px solid rgba(255,255,255,.03)}.game-card-title{font-size:1.15rem;font-weight:700;color:#f3f4f6;text-align:center;margin:0 0 .3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;letter-spacing:.3px}.game-card-subtitle{font-size:.8rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}.home-footer{margin-top:6rem;padding-top:3rem;border-top:1px solid rgba(255,255,255,.05);text-align:center;color:var(--text-secondary);font-size:.8rem;line-height:1.6}.home-footer p{max-width:800px;margin:0 auto 1.5rem;opacity:.6}.footer-links a{color:var(--text-secondary);text-decoration:none;transition:color .2s}.footer-links a:hover{color:#fff;text-decoration:underline}.sidebar{width:260px;background:#0a0f1d;border-right:1px solid rgba(255,255,255,.05);padding:1.5rem;display:flex;flex-direction:column;flex-shrink:0;transition:width .3s ease,padding .3s ease,opacity .3s ease}.sidebar-collapsed .sidebar{width:0;padding:0;opacity:0;pointer-events:none}.sidebar-toggle-inner{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:4px}.sidebar-toggle-inner:hover{background:#ffffff1a;color:#fff}.sidebar-restore-btn{position:fixed;left:1rem;top:1rem;background:var(--card-bg);border:1px solid rgba(255,255,255,.1);color:#fff;padding:.5rem;border-radius:8px;cursor:pointer;z-index:100}.sidebar-restore-btn:hover{background:var(--accent-color)}.project-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem;flex-grow:1}.project-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:8px;transition:background .2s}.project-item:hover{background:#ffffff0d}.project-item.active{background:var(--accent-color)}.project-select{flex-grow:1;background:none;border:none;color:#fff;text-align:left;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-delete{background:none;border:none;color:#ffffff4d;cursor:pointer;padding:4px;border-radius:4px}.project-delete:hover{background:#ef444433;color:#ef4444}.add-project-btn{width:100%;justify-content:center}.project-name-input{background:none;border:none;color:#fff;font-size:2rem;font-weight:700;text-align:center;width:100%;max-width:600px;border-bottom:2px solid transparent;padding:.5rem;margin-bottom:1rem}.project-name-input:focus{outline:none;border-bottom-color:var(--accent-color)}.app-container{flex-grow:1;width:100%;max-width:none;padding:2rem}.nav{display:flex;gap:1rem;margin-bottom:2rem;justify-content:center}.nav-btn{background:var(--card-bg);border:1px solid rgba(255,255,255,.1);color:var(--text-secondary);padding:.75rem 1.5rem;border-radius:var(--radius);cursor:pointer;transition:all .2s;font-weight:600}.nav-btn.active{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.view-container{background:#1e293b80;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:2rem;box-shadow:0 10px 30px #0003}.config-grid{display:grid;gap:2rem}.tier-manager{display:flex;flex-direction:column;gap:1rem}.tier-config-row{display:flex;gap:1rem;align-items:center;background:#0f172a66;padding:1rem;border-radius:var(--radius)}input[type=text],input[type=color]{background:#0f172a;border:1px solid rgba(255,255,255,.1);color:#fff;padding:.5rem;border-radius:6px}.btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:8px;border:none;cursor:pointer;font-weight:500;transition:opacity .2s}.btn-primary{background:var(--accent-color);color:#fff}.btn-danger{background:#ef4444;color:#fff}.btn-success{background:#10b981;color:#fff}.image-drop-zone{border:2px dashed rgba(255,255,255,.2);padding:3rem;border-radius:var(--radius);text-align:center;cursor:pointer;transition:border-color .2s}.image-drop-zone:hover,.image-drop-zone.dragging{border-color:var(--accent-color);background:#3b82f60d}.image-drop-zone.dragging{transform:scale(1.01)}.image-pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:1rem;margin-top:2rem}.pool-item{aspect-ratio:1;border-radius:8px;overflow:hidden;position:relative;background:#000}.pool-item img{width:100%;height:100%;object-fit:cover}.pool-item-actions{position:absolute;top:4px;right:4px;display:flex;gap:4px;opacity:0;transition:opacity .2s}.pool-item:hover .pool-item-actions{opacity:1}.remove-img,.set-cover-btn{background:#0009;border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;border-radius:4px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:all .2s}.remove-img:hover{background:#ef4444;border-color:#ef4444}.set-cover-btn:hover{background:var(--accent-color);border-color:var(--accent-color)}.board-view-wrapper{display:flex;flex-direction:column;gap:1.5rem}.board-controls{display:flex;gap:2.5rem;background:#ffffff0d;padding:.75rem 1.5rem;border-radius:12px;align-items:center;border:1px solid rgba(255,255,255,.05)}.control-group{display:flex;align-items:center;gap:1rem;font-size:.85rem;color:var(--text-secondary)}.control-group input[type=range]{width:150px}.board-layout{display:flex;gap:0;align-items:flex-start}.board-resizer{width:16px;margin:0 4px;cursor:col-resize;background:transparent;transition:background .2s;display:flex;align-items:center;justify-content:center;z-index:10;height:100%}.board-resizer:hover{background:#ffffff0d}.board-resizer:after{content:"";width:2px;height:60px;background:#ffffff1a;border-radius:1px;transition:background .2s,height .2s}.board-resizer:hover:after{background:var(--accent-color);height:100px}.tier-list{flex-grow:1;display:flex;flex-direction:column;gap:4px;background:#000;border:4px solid #000;border-radius:8px}.tier-row{display:flex;min-height:calc(var(--card-size, 90px) + 10px);background:#1a1a1a}.tier-label{width:100px;min-width:100px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:1.2rem;color:#000;padding:1rem;word-break:break-word}.tier-items{flex-grow:1;display:flex;flex-wrap:wrap;gap:4px;padding:4px;background:#111;min-height:calc(var(--card-size, 90px) + 8px)}.unassigned-pool-sidebar{width:var(--pool-width, 300px);min-width:150px;background:#0000004d;padding:1rem;border-radius:12px;min-height:500px;border:1px solid rgba(255,255,255,.05)}.unassigned-pool-sidebar .tier-items{display:grid;grid-template-columns:repeat(auto-fill,var(--card-size, 90px));gap:8px;justify-content:center;align-content:flex-start}.draggable-item{width:var(--card-size, 90px);height:var(--card-size, 90px);aspect-ratio:1 / 1;cursor:grab;transition:transform .1s,opacity .2s;position:relative;overflow:hidden;border-radius:4px}.draggable-item.is-dragging{opacity:.5}.draggable-item.is-dragging:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:4px dashed rgba(255,255,255,.3);background:#ffffff1a;border-radius:4px}.draggable-item.is-dragging img{opacity:.1;filter:grayscale(1)}.unassigned-pool-sidebar .draggable-item{width:100%;aspect-ratio:1}.draggable-item:active{cursor:grabbing}.draggable-item img{width:100%;height:100%;object-fit:cover;display:block}.item-inner{width:100%;height:100%;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease;transform-origin:center;position:relative;border-radius:4px}.draggable-item:not(.is-dragging):hover{z-index:100}.screen-center-preview{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:95vw;height:95vh;z-index:9999;pointer-events:none;background:#000000e6;border:4px solid var(--accent-color);box-shadow:0 0 100px #000,0 0 20px var(--accent-color);display:flex;align-items:center;justify-content:center;border-radius:12px;overflow:hidden;animation:previewPopIn .3s cubic-bezier(.34,1.56,.64,1)}.screen-center-preview img{width:100%;height:100%;object-fit:contain}@keyframes previewPopIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.unassigned-pool{margin-top:3rem;background:#0000004d;padding:1rem;border-radius:12px}.bracket-container{display:flex;flex-direction:column;gap:2rem;min-height:600px;align-items:center;justify-content:center}.bracket-header{width:100%;max-width:800px;text-align:center;margin-bottom:2rem}.round-info{font-size:1rem;color:var(--accent-color);font-weight:700;text-transform:uppercase;letter-spacing:2px;margin-bottom:.5rem}.match-info{font-size:1.5rem;font-weight:800;margin-bottom:1.5rem}.progress-bar-container{width:100%;height:6px;background:#ffffff0d;border-radius:3px;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,var(--accent-color),#60a5fa);transition:width .5s cubic-bezier(.34,1.56,.64,1)}.bracket-matchup-grid{display:grid;gap:1.5rem;width:100%;max-width:1200px;justify-content:center;margin:0 auto}.bracket-matchup-grid.size-2,.bracket-matchup-grid.size-4{grid-template-columns:repeat(2,minmax(200px,400px))}.bracket-matchup-grid.size-8{grid-template-columns:repeat(4,minmax(150px,1fr))}.bracket-option{width:100%;aspect-ratio:4/5;background:var(--card-bg);border-radius:20px;overflow:hidden;cursor:pointer;position:relative;border:4px solid transparent;transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .3s,box-shadow .3s;box-shadow:0 10px 20px #0000004d}.bracket-option:hover{transform:translateY(-5px) scale(1.02);border-color:var(--accent-color);box-shadow:0 20px 40px #3b82f633}.zoom-btn{position:absolute;top:15px;right:15px;width:40px;height:40px;background:#00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);border-radius:50%;border:1.5px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;z-index:50;opacity:0;transform:scale(.8) translateY(-5px);transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px 12px #0000004d}.bracket-option:hover .zoom-btn{opacity:1;transform:scale(1) translateY(0)}.zoom-btn:hover{background:var(--accent-color);border-color:#fff;transform:scale(1.1)!important;box-shadow:0 8px 16px #3b82f666}.mode-selector{background:#ffffff08;padding:.5rem;border-radius:100px;border:1px solid rgba(255,255,255,.05)}.mode-selector .nav-btn{border-radius:100px;border:none;background:transparent;padding:.5rem 1.25rem}.mode-selector .nav-btn.active{background:var(--accent-color);box-shadow:0 4px 12px #3b82f64d}.bracket-single-info{background:var(--card-bg);padding:2.5rem;border-radius:20px;border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:1.5rem;align-items:center;animation:fadeIn .5s ease-out}.bracket-single-info p{color:var(--text-secondary);font-weight:500}.option-image-wrapper{width:100%;height:100%}.option-image-wrapper img{width:100%;height:100%;object-fit:cover}.option-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);display:flex;align-items:flex-end;justify-content:center;padding:2rem;opacity:0;transition:opacity .3s}.bracket-option:hover .option-overlay{opacity:1}.pick-text{color:#fff;font-weight:800;font-size:1.2rem;letter-spacing:1px;padding:.75rem 1.5rem;background:var(--accent-color);border-radius:100px;box-shadow:0 10px 20px #3b82f666}.bracket-controls{margin-top:3rem}.bracket-empty{text-align:center;padding:5rem;color:var(--text-secondary)}.bracket-empty h2{margin:1rem 0;color:#fff}.bracket-winner-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem;text-align:center;animation:fadeIn .8s ease-out}.winner-confetti{font-size:5rem;margin-bottom:1rem;animation:bounce 2s infinite}.bracket-winner-screen h2{font-size:3rem;font-weight:900;background:linear-gradient(to bottom,#fde047,#ca8a04);-webkit-background-clip:text;background-clip:text;-webkit-background-fill-color:transparent;-webkit-text-fill-color:transparent;margin-bottom:2rem}.winner-card{width:350px;aspect-ratio:1;border-radius:30px;overflow:hidden;box-shadow:0 0 50px #ca8a0480,0 0 100px #ca8a0433;border:8px solid #fde047;transform:rotate(-3deg);animation:winnerCardPop .8s cubic-bezier(.34,1.56,.64,1)}.winner-card img{width:100%;height:100%;object-fit:cover}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes winnerCardPop{0%{transform:scale(.5) rotate(10deg);opacity:0}to{transform:scale(1) rotate(-3deg);opacity:1}}.app-footer{margin-top:4rem;padding:2rem;border-top:1px solid rgba(255,255,255,.05);text-align:center;color:var(--text-secondary);font-size:.7rem;max-width:900px;margin-left:auto;margin-right:auto;animation:fadeIn 1s ease-out}.footer-disclaimer{line-height:1.6;margin-bottom:1.5rem;opacity:.8}.footer-sources{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;opacity:.6;text-transform:uppercase;letter-spacing:.5px}.footer-sources a{color:inherit;text-decoration:none;transition:all .2s ease;padding-bottom:2px;border-bottom:1px solid transparent}.footer-sources a:hover{text-decoration:none;opacity:1;color:var(--accent-color);border-bottom-color:var(--accent-color)}.pagination-small{display:flex;align-items:center;gap:.75rem;background:#ffffff0d;padding:.25rem .5rem;border-radius:8px;font-size:.75rem;font-weight:500;color:var(--text-secondary)}.pagination-small button{background:#ffffff1a;border:1px solid rgba(255,255,255,.1);color:#fff;width:24px;height:24px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.pagination-small button:hover:not(:disabled){background:var(--accent-color);border-color:var(--accent-color)}.pagination-small button:disabled{opacity:.3;cursor:not-allowed}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.bracket-setting-input{width:65px;background:#ffffff0d!important;border:1px solid rgba(255,255,255,.1)!important;color:#fff;text-align:center;border-radius:var(--radius);height:38px;padding:0 .5rem;font-size:.85rem;font-weight:600;cursor:text;transition:all .2s}.bracket-setting-input:focus{border-color:var(--accent-color)!important;background:#3b82f61a!important;outline:none}.mashup-container{display:flex;flex-direction:column;gap:3rem;max-width:1200px;margin:0 auto;padding:2rem;align-items:center}.mashup-matchup{display:flex;align-items:center;justify-content:center;gap:2rem;width:100%}.mashup-option{flex:1;max-width:400px;aspect-ratio:1;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:1.5rem;overflow:hidden;position:relative;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.mashup-option:hover{transform:translateY(-8px) scale(1.02);border-color:var(--accent-color);box-shadow:0 20px 40px #0006,0 0 20px #3b82f633}.mashup-img-wrapper{width:100%;height:100%}.mashup-img-wrapper img{width:100%;height:100%;object-fit:contain}.mashup-pick-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);background:var(--accent-color);color:#fff;padding:.8rem 1.5rem;border-radius:2rem;font-weight:700;opacity:0;transition:all .3s;pointer-events:none;letter-spacing:1px}.mashup-option:hover .mashup-pick-badge{opacity:1;transform:translate(-50%,-50%) scale(1)}.mashup-vs-circle{width:60px;height:60px;background:#1a1a1a;border:2px solid rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-style:italic;color:var(--text-secondary);flex-shrink:0}.mashup-leaderboard{width:100%;max-width:600px;background:#ffffff08;padding:2rem;border-radius:1.5rem;border:1px solid rgba(255,255,255,.05)}.mashup-leaderboard h3{text-align:center;margin-bottom:2rem;font-size:1.2rem;color:var(--text-secondary);letter-spacing:2px}.leaderboard-list{display:flex;flex-direction:column;gap:.75rem}.leaderboard-item{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background:#ffffff05;border-radius:1rem}.rank-num{width:30px;font-weight:700;color:var(--accent-color)}.rank-thumb{width:50px;height:50px;object-fit:cover;border-radius:.5rem}.rank-score{margin-left:auto;font-family:monospace;font-weight:700;color:var(--text-secondary)}@media (max-width: 768px){.bracket-matchup-grid{grid-template-columns:1fr!important;gap:1rem;padding:0 1rem}.bracket-option{max-width:300px;margin:0 auto}}