:root{--bg-primary: #1a1a2e;--bg-panel: #16213e;--bg-highlight: #1a2a50;--accent: #e94560;--text-primary: #eeeeee;--text-secondary: #888888;--text-muted: #555555;--text-score: #f0c040;--color-buy: #4ecca3;--color-sell: #e94560;--color-long-side: #3ecf8e;--color-short-side: #e05571;--color-price-up: #4ecca3;--color-price-down: #e94560;--color-networth: #f0c040;--color-exposure-low: #4ecca3;--color-exposure-mid: #f0a020;--color-exposure-high: #e94560;--color-exposure-leveraged: #ff6b35;--color-exposure-margin: #ff1744}*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh}#root{width:100%}.layout{display:flex;flex-direction:column;width:100%;margin:0 auto;height:100vh;height:100dvh;overflow:hidden;padding:.5rem 1rem;gap:.5rem}.game.join-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;margin:0 auto;text-align:center}.subtitle{color:var(--text-secondary);font-size:1.1rem}.join-form{display:flex;gap:.75rem}.name-input{font-size:1.25rem;padding:.75rem 1rem;border:2px solid #333;border-radius:8px;background:var(--bg-panel);color:var(--text-primary);outline:none;width:220px}.name-input:focus{border-color:var(--accent)}.join-btn{font-size:1.25rem;padding:.75rem 1.5rem;border:none;border-radius:8px;background:var(--accent);color:#fff;cursor:pointer;transition:background .2s}.join-btn:hover{background:#c73650}.join-btn:disabled{opacity:.4;cursor:not-allowed}.connecting{color:var(--text-secondary);font-style:italic;text-align:center;padding:.25rem;flex-shrink:0}.zone-chart{flex:1;min-height:120px;position:relative;width:100%}.zone-chart .graph-container{position:relative;width:100%;height:100%}.zone-chart .score-graph{width:100%;height:100%}.zone-chart .score-graph-canvas-wrap{width:100%;height:100%;background:var(--bg-panel);border-radius:8px;overflow:hidden;position:relative}.zone-chart .score-graph-canvas-wrap canvas{display:block;width:100%;height:100%}.graph-overlay-stats{position:absolute;top:0;left:0;z-index:2;padding:.5rem .75rem;pointer-events:none;background:#16213ebf;border-radius:8px 0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.graph-overlay-stats .score-label{margin-bottom:0;color:var(--text-secondary);font-size:.65rem;text-transform:uppercase;letter-spacing:.15em}.graph-overlay-stats .price-display{font-size:2rem}.graph-overlay-stats .market-stats{gap:.75rem}.graph-overlay-stats .market-stat-label{color:var(--text-secondary)}.price-display{font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;color:var(--text-primary);position:relative;transition:color .3s ease}.price-display.price-up{color:var(--color-price-up);animation:price-flash-up 1s ease forwards}.price-display.price-down{color:var(--color-price-down);animation:price-flash-down 1s ease forwards}@keyframes price-flash-up{0%{color:var(--color-price-up);text-shadow:0 0 20px rgba(78,204,163,.4)}to{color:var(--text-primary);text-shadow:none}}@keyframes price-flash-down{0%{color:var(--color-price-down);text-shadow:0 0 20px rgba(233,69,96,.4)}to{color:var(--text-primary);text-shadow:none}}.price-arrow{font-size:.8rem;margin-left:.2rem;vertical-align:super}.price-arrow-up{color:var(--color-price-up)}.price-arrow-down{color:var(--color-price-down)}.market-stats{display:flex;gap:1rem}.market-stat{display:flex;flex-direction:column;align-items:center;gap:.1rem}.market-stat-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}.market-stat-value{font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-secondary)}.market-stat-high{color:var(--color-price-up)}.market-stat-low{color:var(--color-price-down)}.graph-live-btn{position:absolute;top:8px;right:8px;padding:2px 10px;font-size:.65rem;font-weight:700;letter-spacing:.1em;border:1px solid var(--accent);border-radius:4px;background:#e9456026;color:var(--accent);cursor:pointer;z-index:3;transition:background .2s}.graph-live-btn:hover{background:#e9456059}.score-graph{width:100%;position:relative}.zone-decision{flex-shrink:0;width:100%;max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:.35rem}.decision-constraints{display:flex;align-items:center;gap:.75rem}.decision-constraints .meter-row{flex:1}.constraint-cash{display:flex;align-items:center;gap:.35rem;flex-shrink:0}.constraint-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.constraint-value{font-size:.9rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-primary)}.constraint-value.negative{color:var(--color-exposure-margin)}.constraint-ownership{display:flex;align-items:center;gap:.35rem;flex-shrink:0}.constraint-ownership.at-limit .constraint-value{color:var(--color-exposure-margin);font-weight:700;animation:pulse-margin .8s ease-in-out infinite}.decision-positions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.meter-row{display:flex;align-items:center;gap:.5rem}.meter-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);width:4.5rem;text-align:right;flex-shrink:0}.decision-constraints .meter-label{width:auto}.meter-bar-track{position:relative;flex:1;height:6px;background:#ffffff14;border-radius:3px;overflow:visible}.meter-bar-fill{height:100%;border-radius:3px;transition:width .3s ease,background .3s ease;min-width:2px}.meter-bar-fill.exposure-low{background:var(--color-exposure-low)}.meter-bar-fill.exposure-mid{background:var(--color-exposure-mid)}.meter-bar-fill.exposure-high{background:var(--color-exposure-high)}.meter-bar-fill.exposure-leveraged{background:var(--color-exposure-leveraged)}.meter-bar-fill.exposure-margin{background:var(--color-exposure-margin);animation:pulse-margin .8s ease-in-out infinite}@keyframes pulse-margin{0%,to{opacity:1}50%{opacity:.6}}.meter-bar-marker{position:absolute;top:-1px;bottom:-1px;width:2px;background:#fff6;pointer-events:none}.meter-bar-marker.margin-threshold{background:#ff174499}.meter-value{font-size:.7rem;font-variant-numeric:tabular-nums;color:var(--text-muted);white-space:nowrap;min-width:2.5rem;text-align:right;flex-shrink:0}.meter-value.leveraged{color:var(--color-exposure-leveraged);font-weight:700}.meter-warning{font-size:.7rem;font-weight:700;text-align:center;animation:pulse-margin .8s ease-in-out infinite;letter-spacing:.05em}.meter-warning.margin-warning,.meter-warning.concentration-warning{color:var(--color-exposure-margin)}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}@keyframes margin-call-flash{0%,to{background:transparent}25%{background:#ff174440}50%{background:transparent}75%{background:#ff174426}}@keyframes margin-call-text-pulse{0%,to{color:var(--color-exposure-margin);opacity:1}50%{color:#f44;opacity:.8;text-shadow:0 0 8px rgba(255,23,68,.6)}}.meter-row.margin-risk,.meter-row.concentration-risk{animation:shake .3s ease-in-out}.meter-row.margin-called{animation:shake .4s ease-in-out,margin-call-flash 1s ease-in-out 2;border-radius:4px}.meter-warning.margin-call-active{color:var(--color-exposure-margin);animation:margin-call-text-pulse .6s ease-in-out infinite;font-size:.8rem;letter-spacing:.1em}.meter-warning.cooldown-warning{color:var(--color-exposure-leveraged);animation:pulse-margin 1.5s ease-in-out infinite}.meter-bar-marker.cooldown-cap{background:var(--color-exposure-leveraged);width:2px}.position-card{border-radius:8px;overflow:hidden;background:#ffffff08;border:1px solid rgba(255,255,255,.06);transition:border-color .3s ease}.position-card.has-position{border-color:#ffffff1f}.position-card-header{display:flex;align-items:center;gap:.35rem;padding:.3rem .6rem;font-variant-numeric:tabular-nums}.position-card-title{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);flex-shrink:0}.position-card-long .position-card-title{color:var(--color-long-side)}.position-card-short .position-card-title{color:var(--color-short-side)}.position-card-shares{font-size:.75rem;color:var(--text-secondary);flex:1}.position-card-pnl{font-size:.75rem;font-weight:600}.position-card-buttons{display:flex;gap:1px;background:#ffffff0a}.trade-btn{font-size:1rem;font-weight:600;padding:.5rem .25rem;border:none;border-radius:0;cursor:pointer;transition:background .15s,transform .1s;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;letter-spacing:.05em;text-transform:uppercase;box-shadow:none}.trade-btn:active{transform:scale(.97)}.trade-btn:disabled{opacity:.35;cursor:not-allowed}.trade-btn:disabled:active{transform:none}.trade-btn.entry{flex:3}.trade-btn.exit{flex:2}.buy-btn{background:#3ecf8e26;color:var(--color-long-side)}.buy-btn:hover:not(:disabled){background:#3ecf8e40}.sell-btn{background:#3ecf8e0f;color:#3ecf8e8c}.sell-btn:hover:not(:disabled){background:#3ecf8e24;color:var(--color-long-side)}.short-btn{background:#e0557126;color:var(--color-short-side)}.short-btn:hover:not(:disabled){background:#e0557140}.cover-btn{background:#e055710f;color:#e055718c}.cover-btn:hover:not(:disabled){background:#e0557124;color:var(--color-short-side)}.trade-btn.buy-btn.leveraged{background:#ff6b3533;color:var(--color-exposure-leveraged)}.trade-btn.buy-btn.leveraged:hover:not(:disabled){background:#ff6b354d}.btn-label{font-size:inherit;font-weight:700;line-height:1.2}.btn-preview{font-size:.6rem;opacity:.7;font-variant-numeric:tabular-nums;font-weight:400}.pnl-positive{color:var(--color-buy)}.pnl-negative{color:var(--color-sell)}.portfolio-networth{color:var(--color-networth)}.zone-progress{flex-shrink:0;border-top:1px solid rgba(255,255,255,.06);overflow:hidden;transition:max-height .3s ease}.zone-progress.collapsed{max-height:40px}.zone-progress.expanded{max-height:350px}.progress-summary{display:flex;align-items:center;gap:.75rem;padding:.35rem .75rem;cursor:pointer;height:40px;-webkit-user-select:none;user-select:none}.progress-summary:hover{background:#ffffff08}.progress-rank{font-size:.85rem;font-weight:700;color:var(--color-networth);font-variant-numeric:tabular-nums;min-width:1.5rem}.progress-networth{display:flex;align-items:center;gap:.3rem}.progress-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.progress-networth .portfolio-value{font-size:.9rem;font-weight:600;font-variant-numeric:tabular-nums}.progress-pnl{display:flex;align-items:baseline;gap:.3rem;flex:1}.progress-pnl .pnl-value{font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums}.progress-pnl .pnl-percent{font-size:.7rem;font-variant-numeric:tabular-nums}.pnl-sparkline-mini{border-radius:2px;flex-shrink:0}.progress-chevron{font-size:.6rem;color:var(--text-muted);flex-shrink:0}.progress-leaderboard{padding:0 .5rem .5rem;max-height:280px;overflow-y:auto}.progress-leaderboard .leaderboard{width:100%}.progress-leaderboard .leaderboard-list{height:auto;max-height:240px}.leaderboard{width:100%}.leaderboard-header{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.35rem}.leaderboard h2{font-size:.85rem;color:var(--accent);text-transform:uppercase;letter-spacing:.1em}.leaderboard-list{display:flex;flex-direction:column;gap:2px;max-height:240px;overflow-y:auto}.leaderboard-row{display:flex;align-items:center;gap:.5rem;padding:.3rem .5rem;border-radius:6px;background:var(--bg-panel);transition:transform .4s ease,background .3s ease,box-shadow .3s ease;font-variant-numeric:tabular-nums}.leaderboard-row.you{background:var(--bg-highlight);box-shadow:inset 0 0 0 1px var(--accent)}.leaderboard-row.moved-up{animation:slide-up .4s ease}.leaderboard-row.moved-down{animation:slide-down .4s ease}@keyframes slide-up{0%{transform:translateY(16px);background:#1a3a2e}to{transform:translateY(0)}}@keyframes slide-down{0%{transform:translateY(-16px);background:#3a1a2e}to{transform:translateY(0)}}.leaderboard-row .rank{font-size:.75rem;color:#666;min-width:1.5rem;text-align:right}.leaderboard-row .player-name{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem}.you-tag{font-size:.55rem;color:var(--accent);margin-left:.25rem;text-transform:uppercase;letter-spacing:.05em}.leaderboard-row .player-score{font-weight:600;color:var(--color-networth);font-size:.8rem;min-width:3rem;text-align:right}.leaderboard-row .player-pnl{font-size:.7rem;font-weight:500;min-width:3rem;text-align:right}.no-players{color:var(--text-muted);font-style:italic;padding:.5rem 0;font-size:.8rem}.player-count{font-size:.65rem;color:var(--text-muted)}.leaderboard-list,.progress-leaderboard{scrollbar-width:thin;scrollbar-color:#333 transparent}.leaderboard-list::-webkit-scrollbar,.progress-leaderboard::-webkit-scrollbar{width:6px}.leaderboard-list::-webkit-scrollbar-track,.progress-leaderboard::-webkit-scrollbar-track{background:transparent}.leaderboard-list::-webkit-scrollbar-thumb,.progress-leaderboard::-webkit-scrollbar-thumb{background:#333;border-radius:3px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (max-width: 599px){.game.join-screen{padding:2rem 1rem;min-height:100vh;min-height:100dvh}.join-form{flex-direction:column;width:100%}.name-input{width:100%}.join-btn{width:100%;min-height:48px}.layout{padding:.25rem .5rem;padding-bottom:env(safe-area-inset-bottom,0px);gap:.25rem}.decision-positions{grid-template-columns:1fr;gap:.25rem}.graph-overlay-stats .price-display{font-size:1.5rem}.trade-btn{min-height:40px;font-size:.9rem}}@media (prefers-reduced-motion: reduce){.leaderboard-row.moved-up,.leaderboard-row.moved-down{animation:none}.trade-btn,.leaderboard-row{transition:none}.price-display.price-up,.price-display.price-down{animation:none}.lb-bar-fill,.meter-bar-fill{transition:none}.meter-warning{animation:none}.zone-progress{transition:none}}