:root{--bg-0: #0a1410;--bg-1: #0f1c16;--bg-2: #14271e;--bg-3: #1c3527;--grass-1: #2c8a3f;--grass-2: #268c46;--line: rgba(255, 255, 255, .85);--gold: #f4c150;--gold-deep: #c89b2b;--neon: #5ad7ff;--neon-deep: #1a78b0;--red: #e94560;--green: #4fd175;--text: #f3f8f5;--text-dim: #9fb6ad;--text-mute: #6f857c;--border: rgba(255, 255, 255, .1);--glass: rgba(255, 255, 255, .06);--shadow: 0 8px 32px rgba(0, 0, 0, .4)}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;min-height:100vh;background:radial-gradient(ellipse at top left,rgba(90,215,255,.06),transparent 60%),radial-gradient(ellipse at bottom right,rgba(244,193,80,.06),transparent 60%),var(--bg-0);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}#app{width:100%;min-height:100vh}.screen{display:none;min-height:100vh}.screen.active{display:flex;flex-direction:column}.hidden{display:none!important}#screen-login{align-items:center;justify-content:center;padding:20px}.login-card{width:100%;max-width:400px;background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--border);border-radius:24px;padding:36px 28px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.logo{text-align:center;margin-bottom:24px}.logo h1{font-size:28px;font-weight:800;margin:12px 0 6px;background:linear-gradient(120deg,var(--gold),var(--neon));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:1px}.tagline{color:var(--text-dim);margin:0;font-size:13px}.ball-icon{width:64px;height:64px;margin:0 auto;background:radial-gradient(circle at 30% 30%,#fff,#d0d0d0);border-radius:50%;position:relative;box-shadow:0 6px 16px #00000080,inset -4px -6px 12px #0003;background-image:radial-gradient(circle at 30% 30%,#fff,#f0f0f0 40%,#b0b0b0)}.ball-icon:before,.ball-icon:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:radial-gradient(circle at 50% 18%,#000 0 6px,transparent 7px),radial-gradient(circle at 50% 82%,#000 0 6px,transparent 7px),radial-gradient(circle at 18% 50%,#000 0 6px,transparent 7px),radial-gradient(circle at 82% 50%,#000 0 6px,transparent 7px);opacity:.85}.ball-icon:after{background:radial-gradient(circle at 50% 50%,#000 0 5px,transparent 6px)}.ball-icon.small{width:28px;height:28px}.ball-icon.small:before{background:radial-gradient(circle at 50% 25%,#000 0 2.5px,transparent 3px),radial-gradient(circle at 50% 75%,#000 0 2.5px,transparent 3px),radial-gradient(circle at 25% 50%,#000 0 2.5px,transparent 3px),radial-gradient(circle at 75% 50%,#000 0 2.5px,transparent 3px)}.ball-icon.small:after{background:radial-gradient(circle at 50% 50%,#000 0 2px,transparent 3px)}.login-tabs{display:flex;background:var(--bg-3);border-radius:12px;padding:4px;margin-bottom:18px}.login-tabs .tab{flex:1;background:transparent;border:none;padding:8px;color:var(--text-dim);font-size:14px;cursor:pointer;border-radius:8px;transition:all .2s}.login-tabs .tab.active{background:var(--gold);color:var(--bg-0);font-weight:600}.form{display:flex;flex-direction:column;gap:12px}.form input{background:var(--bg-3);border:1px solid var(--border);border-radius:12px;padding:12px 14px;color:var(--text);font-size:14px;outline:none;transition:border-color .2s}.form input:focus{border-color:var(--neon)}.btn-primary,.btn-secondary{border:none;border-radius:12px;padding:12px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background:linear-gradient(120deg,var(--gold),var(--gold-deep));color:var(--bg-0);width:100%;box-shadow:0 4px 14px #f4c1504d}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px #f4c15073}.btn-primary.big{font-size:16px;padding:16px;margin-top:16px}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{background:var(--glass);color:var(--text);width:100%;border:1px solid var(--border);margin-top:8px}.btn-text{background:transparent;border:none;color:var(--text-dim);cursor:pointer;font-size:13px;padding:4px 8px}.btn-text:hover{color:var(--text)}.error{color:var(--red);text-align:center;margin:12px 0 0;font-size:13px;min-height:18px}.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;border-bottom:1px solid var(--border);background:var(--bg-1)}.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}.user-info{display:flex;align-items:center;gap:12px}.stats-pill{background:var(--glass);border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--text-dim)}.lobby{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;padding:20px;max-width:1400px;margin:0 auto;width:100%}.lobby h2{font-size:18px;margin:0 0 12px;color:var(--text);border-left:3px solid var(--gold);padding-left:10px}.setting-block{margin-bottom:16px}.setting-block>label{display:block;margin-bottom:8px;font-size:13px;color:var(--text-dim)}.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.mode-card{background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:14px;cursor:pointer;text-align:left;transition:all .2s;color:var(--text)}.mode-card:hover{border-color:var(--neon);background:var(--bg-3)}.mode-card.active{border-color:var(--gold);background:linear-gradient(135deg,#f4c1501f,#f4c15005)}.mode-title{font-weight:700;font-size:14px}.mode-sub{color:var(--text-dim);font-size:12px;margin-top:2px}.difficulty-row,.formation-row{display:flex;gap:8px}.diff-btn,.form-btn{flex:1;background:var(--bg-2);border:1px solid var(--border);color:var(--text);padding:10px;border-radius:10px;cursor:pointer;transition:all .2s}.diff-btn:hover,.form-btn:hover{border-color:var(--neon)}.diff-btn.active,.form-btn.active{background:var(--gold);color:var(--bg-0);font-weight:700;border-color:var(--gold)}#team-search{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);width:100%;margin-bottom:10px;outline:none}#team-search:focus{border-color:var(--neon)}.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;max-height:280px;overflow-y:auto;padding:4px;border-radius:10px}.team-grid.compact{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));max-height:200px}.team-card{background:var(--bg-2);border:2px solid var(--border);border-radius:10px;padding:10px 8px;cursor:pointer;text-align:center;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:4px}.team-card:hover{border-color:var(--neon);transform:translateY(-2px)}.team-card.selected{border-color:var(--gold);background:linear-gradient(135deg,rgba(244,193,80,.18),var(--bg-2));box-shadow:0 4px 12px #f4c15040}.team-card .team-flag{width:36px;height:24px;border-radius:4px;background:linear-gradient(135deg,var(--c1, #333),var(--c2, #ddd));border:1px solid rgba(0,0,0,.2)}.team-card .team-label{font-size:12px;font-weight:600}.team-card .team-rank{font-size:10px;color:var(--text-dim)}.spectate-list,.leaderboard,.recent{background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:16px;max-height:280px;overflow-y:auto}.spectate-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}.spectate-row:last-child{border-bottom:none}.spectate-teams{font-weight:600}.spectate-score{color:var(--gold);font-weight:700;margin:0 12px}.spectate-watch{background:var(--glass);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:8px;cursor:pointer;font-size:12px}.spectate-watch:hover{border-color:var(--neon)}.lb-row{display:flex;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);gap:10px}.lb-row:last-child{border-bottom:none}.lb-rank{width:24px;font-weight:700;color:var(--gold)}.lb-name{flex:1;font-weight:600}.lb-stats{font-size:12px;color:var(--text-dim)}.recent-row{padding:8px 0;border-bottom:1px solid var(--border);font-size:12px}.recent-row:last-child{border-bottom:none}.recent-row .final{color:var(--gold);font-weight:700}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%);background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:12px 20px;box-shadow:var(--shadow);z-index:100;display:flex;align-items:center;gap:10px;max-width:90%}.spinner{width:18px;height:18px;border:2px solid var(--bg-3);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.game-layout{display:flex;flex-direction:column;height:100vh;max-height:100vh;overflow:hidden}.game-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:12px 20px;background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border-bottom:1px solid var(--border)}.team-banner{display:flex;align-items:center;gap:12px}.team-banner.away{justify-content:flex-end}.team-banner .flag{width:48px;height:32px;border-radius:6px;background:linear-gradient(135deg,var(--c1, #333),var(--c2, #ddd));border:1px solid rgba(0,0,0,.3);box-shadow:0 2px 6px #0000004d}.team-meta .team-name{font-weight:700;font-size:16px}.team-meta .team-sub{font-size:12px;color:var(--text-dim)}.score{font-size:32px;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums;min-width:36px;text-align:center}.match-meta{text-align:center;padding:0 16px}.phase-label{font-size:12px;color:var(--text-dim);letter-spacing:2px;text-transform:uppercase}.turn-info{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:4px}.ap-pills{display:inline-flex;gap:3px}.ap-pill{width:8px;height:8px;border-radius:50%;background:var(--bg-3)}.ap-pill.active{background:var(--gold);box-shadow:0 0 6px var(--gold)}.action-prompt{margin-top:6px;font-size:13px;color:var(--neon);font-weight:600;min-height:18px}.action-prompt.waiting{color:var(--text-dim)}.game-main{display:grid;grid-template-columns:1fr 320px;gap:0;flex:1;overflow:hidden}.pitch-wrap{position:relative;background:#061a0e;display:flex;align-items:center;justify-content:center;overflow:hidden}.pitch-wrap canvas{width:100%;height:100%;object-fit:contain;display:block;cursor:pointer}.tooltip{position:absolute;background:var(--bg-1);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:12px;pointer-events:none;z-index:10;box-shadow:var(--shadow);white-space:nowrap}.tooltip .tt-title{font-weight:700;margin-bottom:4px}.tooltip .tt-row{display:flex;justify-content:space-between;gap:12px;color:var(--text-dim)}.tooltip .tt-row span:last-child{color:var(--gold);font-weight:700}.action-bar{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:8px;background:#0a1410d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:16px;padding:8px;z-index:10;flex-wrap:wrap;justify-content:center;max-width:90%}.action-btn{background:var(--bg-3);border:1px solid var(--border);color:var(--text);padding:8px 14px;border-radius:10px;cursor:pointer;font-size:13px;transition:all .15s}.action-btn:hover{border-color:var(--gold);background:linear-gradient(135deg,rgba(244,193,80,.15),var(--bg-3))}.action-btn.danger{border-color:var(--red);color:var(--red)}.action-btn.ghost{background:transparent}.icon-btn{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;background:#0a1410b3;border:1px solid var(--border);color:var(--text);font-size:18px;cursor:pointer;z-index:10}.game-side{background:var(--bg-1);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.game-side h3{margin:0;padding:12px 14px 6px;font-size:13px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1.5px}.event-log{flex:0 0 240px;display:flex;flex-direction:column;border-bottom:1px solid var(--border)}.event-log ul{list-style:none;margin:0;padding:0 14px 12px;overflow-y:auto;flex:1}.event-log li{font-size:12px;padding:4px 0;border-bottom:1px dashed var(--border);color:var(--text)}.event-log li.goal{color:var(--gold);font-weight:700}.event-log li.foul{color:var(--red)}.event-log li.info{color:var(--text-dim);font-style:italic}.event-log li.save{color:var(--neon)}.chat-panel{flex:1;display:flex;flex-direction:column;overflow:hidden}.chat-list{flex:1;overflow-y:auto;padding:0 14px;display:flex;flex-direction:column;gap:6px}.chat-msg{font-size:12px;background:var(--bg-2);padding:6px 10px;border-radius:10px;border:1px solid var(--border);word-break:break-word}.chat-msg .who{font-weight:700;margin-right:6px}.chat-msg.home .who{color:var(--neon)}.chat-msg.away .who{color:var(--gold)}.chat-msg.spectator .who{color:var(--text-mute)}.chat-msg.system{background:transparent;border:none;color:var(--text-mute);text-align:center;font-style:italic}.chat-msg .emoji{font-size:24px;display:inline-block}.emoji-row{display:flex;gap:4px;padding:6px 14px;flex-wrap:wrap}.emoji-btn{background:var(--bg-2);border:1px solid var(--border);border-radius:8px;width:32px;height:32px;font-size:18px;cursor:pointer}.emoji-btn:hover{background:var(--bg-3)}.chat-form{display:flex;gap:6px;padding:8px 14px;border-top:1px solid var(--border)}.chat-form input{flex:1;background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text);outline:none;font-size:13px}.chat-form input:focus{border-color:var(--neon)}.chat-form button{background:var(--gold);border:none;color:var(--bg-0);padding:0 14px;border-radius:8px;font-weight:700;cursor:pointer}#btn-leave{margin:12px;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:10px;color:var(--text);cursor:pointer}.goal-flash{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:200}.goal-text{font-size:clamp(60px,14vw,180px);font-weight:900;background:linear-gradient(120deg,#ffe680,#ff7eb3,#5ad7ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:4px;text-shadow:0 0 60px rgba(244,193,80,.6);animation:goalPop 1.6s ease-out}@keyframes goalPop{0%{transform:scale(.4);opacity:0}20%{transform:scale(1.2);opacity:1}80%{transform:scale(1);opacity:1}to{transform:scale(1.4);opacity:0}}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:150;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.modal-card{background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--border);border-radius:20px;padding:32px;width:90%;max-width:440px;text-align:center}.modal-card h2{margin:0 0 16px;font-size:24px;background:linear-gradient(120deg,var(--gold),var(--neon));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.modal-card p{color:var(--text-dim);margin:8px 0}.modal-card .btn-primary{margin-top:16px}@media (max-width: 900px){.lobby{grid-template-columns:1fr}.game-main{grid-template-columns:1fr;grid-template-rows:1fr auto}.game-side{border-left:none;border-top:1px solid var(--border);max-height:36vh}.event-log{flex:0 0 110px}.game-top{padding:8px 12px}.team-meta .team-name{font-size:13px}.team-meta .team-sub{font-size:10px}.team-banner .flag{width:32px;height:22px}.score{font-size:24px}.action-btn{padding:6px 10px;font-size:12px}}@media (max-width: 600px){.topbar{padding:10px 14px}.brand span,.stats-pill{display:none}.game-top{grid-template-columns:1fr auto 1fr;gap:8px}.team-meta{display:none}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--gold-deep)}