:root{--bg: #0d0d1a;--bg-surface: #151528;--bg-elevated: #1e1e38;--border: rgba(255, 255, 255, .1);--border-strong: rgba(255, 255, 255, .18);--text: #f0f0f8;--text-muted: rgba(240, 240, 248, .55);--accent: #a855f7;--accent-glow: rgba(168, 85, 247, .25);--red: #FF3355;--blue: #3366FF;--yellow: #FFD700;--green: #33CC66;--purple: #9933FF;--orange: #FF6600;--pink: #FF66BB;--teal: #00CCBB;--radius: 14px;--radius-sm: 8px;--radius-lg: 20px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-display: "Arial Black", "Impact", var(--font);--header-height: 56px;--safe-bottom: env(safe-area-inset-bottom, 0px)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{height:100%;-webkit-text-size-adjust:100%}body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100%;overscroll-behavior:none}#app{min-height:100dvh;display:flex;flex-direction:column}img{max-width:100%;display:block}button{font-family:inherit;cursor:pointer;border:none;outline:none}input,select{font-family:inherit}.shell{display:flex;flex-direction:column;min-height:100dvh}.app-header{position:sticky;top:0;z-index:100;height:var(--header-height);background:#0d0d1aeb;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px}.header-logo{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}.logo-pips{display:flex;gap:4px;align-items:center}.logo-pips .pip{display:inline-block;width:8px;height:8px;border-radius:50%}.pip-red{background:var(--red)}.pip-blue{background:var(--blue)}.pip-yellow{background:var(--yellow)}.pip-green{background:var(--green)}.pip-purple{background:var(--purple)}.pip-teal{background:var(--teal)}.logo-text{font-family:var(--font-display);font-size:1.2rem;font-weight:900;letter-spacing:.04em;color:var(--text)}.logo-accent{color:var(--accent)}.header-nav{display:flex;gap:4px}.nav-btn{background:transparent;color:var(--text-muted);padding:8px;border-radius:var(--radius-sm);display:flex;align-items:center;transition:color .15s,background .15s}.nav-btn:hover,.nav-btn.active{color:var(--text);background:var(--bg-elevated)}.main-content{flex:1;display:flex;flex-direction:column}.view{flex:1;padding:20px 16px calc(24px + var(--safe-bottom));max-width:480px;width:100%;margin:0 auto}.view-header{margin-bottom:24px}.view-header h2{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}.view-subtitle{color:var(--text-muted);font-size:.9rem}.section-title{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:var(--radius);font-size:.95rem;font-weight:700;letter-spacing:.01em;transition:filter .15s,transform .1s,opacity .15s;cursor:pointer;border:none;text-decoration:none}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 0 20px var(--accent-glow)}.btn-primary:hover:not(:disabled){filter:brightness(1.1)}.btn-secondary{background:var(--bg-elevated);color:var(--text);border:1px solid var(--border-strong)}.btn-secondary:hover:not(:disabled){background:#252545}.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}.btn-ghost:hover:not(:disabled){background:var(--bg-elevated);color:var(--text)}.btn-danger{background:transparent;color:var(--red);border:1px solid rgba(255,51,85,.35)}.btn-danger:hover:not(:disabled){background:#ff33551f}.btn-large{padding:16px 28px;font-size:1.05rem;border-radius:var(--radius-lg)}.btn-icon{background:transparent;color:var(--text-muted);padding:8px;border-radius:var(--radius-sm);display:flex;align-items:center;transition:color .15s,background .15s}.btn-icon:hover:not(:disabled){color:var(--red);background:#ff33551a}.btn-icon:disabled{opacity:.25;cursor:not-allowed}.view-home{padding-top:12px}.hero{text-align:center;padding:24px 0 28px}.hero-cards{display:flex;justify-content:center;margin-bottom:20px;position:relative;height:72px}.hero-card{width:48px;height:64px;border-radius:8px;position:absolute;border:2px solid rgba(255,255,255,.15);box-shadow:0 4px 12px #00000080}.hero-card:after{content:"";display:block;width:14px;height:14px;border-radius:50%;background:#ffffffd9;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.card-red{background:var(--red);left:calc(50% - 96px);transform:rotate(-12deg)}.card-blue{background:var(--blue);left:calc(50% - 48px);transform:rotate(-5deg)}.card-yellow{background:var(--yellow);left:calc(50% + -0px);transform:rotate(0)}.card-green{background:var(--green);left:calc(50% + 48px);transform:rotate(5deg)}.card-purple{background:var(--purple);left:calc(50% + 96px);transform:rotate(12deg)}.hero-title{font-size:2rem;font-weight:900;letter-spacing:-.03em;margin-bottom:10px}.accent{color:var(--accent)}.hero-subtitle{color:var(--text-muted);font-size:.92rem;line-height:1.5;max-width:300px;margin:0 auto}.home-actions{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}.home-actions .btn{width:100%}.recent-section{margin-top:8px}.game-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:background .15s,border-color .15s}.game-card:hover{background:var(--bg-elevated);border-color:var(--border-strong)}.game-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.game-date{font-size:.78rem;color:var(--text-muted)}.game-winner{font-size:.82rem;font-weight:700}.game-scores{display:flex;flex-direction:column;gap:4px}.score-row{display:flex;align-items:center;gap:8px;font-size:.85rem}.score-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.score-name{flex:1;color:var(--text-muted)}.score-value{font-weight:700;font-variant-numeric:tabular-nums}.player-list{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.player-row{display:flex;align-items:center;gap:10px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px}.color-picker-dot{width:20px;height:20px;border-radius:50%;flex-shrink:0;border:2px solid rgba(255,255,255,.2)}.player-name-input{flex:1;background:transparent;border:none;color:var(--text);font-size:.95rem;font-weight:600;min-width:0;outline:none}.player-name-input::placeholder{color:var(--text-muted)}.color-select{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.82rem;padding:4px 6px;cursor:pointer;outline:none;max-width:80px}.color-select option:disabled{color:var(--text-muted)}.setup-footer{display:flex;gap:10px;flex-wrap:wrap}.setup-footer .btn-ghost{flex:1;min-width:120px}.setup-footer .btn-primary{flex:2;min-width:160px}.view-capture{gap:16px;display:flex;flex-direction:column}.preview-area{background:var(--bg-surface);border:2px dashed var(--border-strong);border-radius:var(--radius-lg);min-height:240px;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:border-color .2s}.preview-area.has-image{border-style:solid;border-color:var(--border)}.preview-img{width:100%;height:100%;object-fit:contain;max-height:360px}.upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-muted);padding:24px;text-align:center}.upload-placeholder svg{opacity:.4}.upload-placeholder p{font-size:.9rem}.capture-actions{display:flex;gap:10px}.capture-actions .btn{flex:1}.tip{font-size:.82rem;color:var(--text-muted);text-align:center;line-height:1.4}.loading-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:300px;text-align:center;padding:40px 20px}.spinner{width:52px;height:52px;border:4px solid var(--bg-elevated);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-sub{font-size:.85rem;color:var(--text-muted)}.winner-banner{background:var(--bg-surface);border:2px solid;border-radius:var(--radius-lg);padding:16px 20px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;box-shadow:0 0 30px #0000004d}.winner-label{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}.winner-name{font-size:1.8rem;font-weight:900;letter-spacing:-.02em}.winner-score{font-size:1rem;font-weight:700;color:var(--text-muted)}.scores-section{margin-bottom:24px}.results-list{display:flex;flex-direction:column;gap:8px}.result-row{display:grid;grid-template-columns:22px 14px 1fr auto auto;align-items:center;gap:8px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px}.winner-row{border-color:var(--border-strong);background:var(--bg-elevated)}.result-medal{font-size:1rem;text-align:center}.result-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}.result-name{font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result-bar-wrap{width:100%;height:4px;background:var(--bg-elevated);border-radius:2px;overflow:hidden;grid-column:1 / -2;margin-top:-4px;display:none}.result-bar{height:100%;border-radius:2px;transition:width .4s ease;min-width:4px}.result-score{font-size:1.2rem;font-weight:900;font-variant-numeric:tabular-nums;color:var(--text);justify-self:end}.overlay-section{margin-bottom:24px}.overlay-wrap{border-radius:var(--radius);overflow:hidden;background:var(--bg-surface);border:1px solid var(--border)}.overlay-img{width:100%;display:block}.overlay-caption{padding:8px 12px;font-size:.8rem;color:var(--text-muted);text-align:center}.results-actions{display:flex;flex-direction:column;gap:10px}.results-actions .btn{width:100%}.games-list{display:flex;flex-direction:column;gap:10px}.empty-state{display:flex;flex-direction:column;align-items:center;gap:16px;padding:60px 20px;text-align:center}.empty-pips{display:flex;gap:10px}.empty-pips .pip{width:18px;height:18px;border-radius:50%;opacity:.5}.empty-state p{color:var(--text-muted);font-size:1rem}.detail-date{font-size:.85rem;color:var(--text-muted);margin-bottom:12px}.error{color:var(--red);padding:20px;text-align:center}@media (min-width: 480px){.view{padding:24px 24px calc(32px + var(--safe-bottom))}.hero-title{font-size:2.4rem}.result-bar-wrap{display:block;grid-column:3;margin-top:0}.result-row{grid-template-columns:22px 14px 1fr 80px 40px}}@media (min-width: 768px){.view{max-width:600px}.home-actions{flex-direction:row}.hero-title{font-size:2.8rem}}