@import"https://fonts.googleapis.com/css2?family=Bangers&family=Nunito:wght@400;600;700;800&display=swap";/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-content:""}}}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.top-1\/2{top:50%}.-z-10{z-index:-10}.container{width:100%}.mx-auto{margin-inline:auto}.-mb-px{margin-bottom:-1px}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.h-full{height:100%}.min-h-\[80vh\]{min-height:80vh}.min-h-screen{min-height:100vh}.w-full{width:100%}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-transparent{border-color:#0000}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.object-cover{-o-object-fit:cover;object-fit:cover}.text-center{text-align:center}.text-right{text-align:right}.text-transparent{color:#0000}.capitalize{text-transform:capitalize}.opacity-0{opacity:0}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.select-all{-webkit-user-select:all;-moz-user-select:all;user-select:all}@media (hover:hover){.group-hover\:scale-110:is(:where(.group):hover *){--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x)var(--tw-scale-y)}}.peer-focus\:ring-4:is(:where(.peer):focus~*){--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(4px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.peer-focus\:outline-none:is(:where(.peer):focus~*){--tw-outline-style:none;outline-style:none}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:top-\[2px\]:after{content:var(--tw-content);top:2px}.after\:left-\[2px\]:after{content:var(--tw-content);left:2px}.after\:rounded-full:after{content:var(--tw-content);border-radius:3.40282e38px}.after\:border:after{content:var(--tw-content);border-style:var(--tw-border-style);border-width:1px}.after\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.after\:content-\[\'\'\]:after{--tw-content:"";content:var(--tw-content)}.peer-checked\:after\:translate-x-full:is(:where(.peer):checked~*):after{content:var(--tw-content);--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}@media (hover:hover){.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}}.focus\:border-transparent:focus{border-color:#0000}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}:root{--striker-red:#e53935;--striker-red-dark:#c62828;--midfielder-blue:#1e88e5;--midfielder-blue-dark:#1565c0;--defender-green:#43a047;--defender-green-dark:#2e7d32;--goalie-yellow:#fdd835;--goalie-yellow-dark:#f9a825;--field-green:#4caf50;--field-green-light:#66bb6a;--field-green-dark:#388e3c;--grass-stripe-light:#5cb860;--grass-stripe-dark:#43a047;--sky-blue:#64b5f6;--sky-blue-light:#90caf9;--sky-blue-dark:#42a5f5;--cloud-white:#fafafa;--card-white:#fff;--card-shadow:#00000026;--card-border:#00000014;--text-dark:#1a237e;--text-medium:#37474f;--text-light:#78909c;--gold-accent:gold;--orange-accent:#ff9800;--success:#4caf50;--warning:#ff9800;--error:#f44336;--info:#2196f3}*{box-sizing:border-box}body{touch-action:manipulation;background:radial-gradient(ellipse at 20% 20%,#fff6 0%,transparent 50%),radial-gradient(ellipse at 80% 30%,#ffffff4d 0%,transparent 40%),radial-gradient(ellipse at 60% 80%,#fff3 0%,transparent 45%),linear-gradient(180deg,var(--sky-blue)0%,var(--sky-blue-light)50%,#a5d6a7 100%);min-height:100vh;color:var(--text-dark);margin:0;padding:0;font-family:Nunito,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow-x:hidden}#root{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3,.display-text{letter-spacing:.02em;font-family:Bangers,cursive}.card{background:var(--card-white);box-shadow:0 4px 6px -1px var(--card-shadow),0 2px 4px -1px #0000000f,inset 0 1px #ffffffe6;border:2px solid var(--card-border);border-radius:16px;transition:transform .2s,box-shadow .2s}.card:hover{box-shadow:0 10px 15px -3px var(--card-shadow),0 4px 6px -2px #0000000d;transform:translateY(-2px)}.btn{cursor:pointer;text-transform:uppercase;letter-spacing:.03em;border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-family:Nunito,sans-serif;font-weight:700;transition:all .2s;display:inline-flex}.btn-primary{background:linear-gradient(180deg,var(--midfielder-blue)0%,var(--midfielder-blue-dark)100%);color:#fff;box-shadow:0 4px 0 var(--midfielder-blue-dark),0 6px 10px #1e88e54d}.btn-primary:hover{box-shadow:0 6px 0 var(--midfielder-blue-dark),0 8px 15px #1e88e566;transform:translateY(-2px)}.btn-primary:active{box-shadow:0 2px 0 var(--midfielder-blue-dark),0 3px 5px #1e88e533;transform:translateY(2px)}.btn-success{background:linear-gradient(180deg,var(--defender-green)0%,var(--defender-green-dark)100%);color:#fff;box-shadow:0 4px 0 var(--defender-green-dark),0 6px 10px #43a0474d}.btn-warning{background:linear-gradient(180deg,var(--goalie-yellow)0%,var(--goalie-yellow-dark)100%);color:var(--text-dark);box-shadow:0 4px 0 var(--goalie-yellow-dark),0 6px 10px #fdd8354d}.btn-danger{background:linear-gradient(180deg,var(--striker-red)0%,var(--striker-red-dark)100%);color:#fff;box-shadow:0 4px 0 var(--striker-red-dark),0 6px 10px #e539354d}.badge-striker{background:linear-gradient(135deg,var(--striker-red)0%,var(--striker-red-dark)100%);color:#fff}.badge-midfielder{background:linear-gradient(135deg,var(--midfielder-blue)0%,var(--midfielder-blue-dark)100%);color:#fff}.badge-defender{background:linear-gradient(135deg,var(--defender-green)0%,var(--defender-green-dark)100%);color:#fff}.badge-goalie{background:linear-gradient(135deg,var(--goalie-yellow)0%,var(--goalie-yellow-dark)100%);color:var(--text-dark)}.glossy{position:relative;overflow:hidden}.glossy:before{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(#ffffff4d,#ffffff1a,#0000);height:50%;position:absolute;top:0;left:0;right:0}:focus-visible{outline:3px solid var(--midfielder-blue);outline-offset:2px}::-moz-selection{background:var(--goalie-yellow);color:var(--text-dark)}::selection{background:var(--goalie-yellow);color:var(--text-dark)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#ffffff4d;border-radius:4px}::-webkit-scrollbar-thumb{background:var(--midfielder-blue);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--midfielder-blue-dark)}@keyframes bounce-in{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 5px var(--gold-accent),0 0 10px var(--gold-accent)}50%{box-shadow:0 0 15px var(--gold-accent),0 0 25px var(--gold-accent)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-bounce-in{animation:.5s cubic-bezier(.68,-.55,.265,1.55) bounce-in}.animate-slide-up{animation:.3s ease-out slide-up}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-content{syntax:"*";inherits:false;initial-value:""}.game-board,.board-cell,.piece{transition:all .3s ease-in-out}.theme-tactical .game-board{background-color:#f8fafc;border-color:#475569}.theme-tactical .board-cell{border-color:#cbd5e1}.theme-tactical .board-cell.penalty-box{background-color:#f1f5f9}.theme-tactical .board-cell.goal{background-color:#e2e8f0;background-image:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(0,0,0,.05) 5px,rgba(0,0,0,.05) 10px)}.theme-tactical .piece-icon{stroke:#475569}.theme-tactical .piece.white .piece-icon{stroke:#1e293b;fill:#fff}.theme-tactical .piece.black .piece-icon{stroke:#0f172a;fill:#94a3b8}.theme-realistic .game-board{background-color:#4ade80;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:100% 33%,33% 100%;border-color:#fff}.theme-realistic .board-cell{border:1px solid rgba(255,255,255,.2)}.theme-realistic .board-cell.penalty-box{background-color:#0000000d}.theme-realistic .board-cell.goal{background-image:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(255,255,255,.3) 5px,rgba(255,255,255,.3) 10px)}.theme-realistic .piece-sprite{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));width:90%;height:90%;-o-object-fit:contain;object-fit:contain}.theme-realistic .piece.selected-piece{filter:drop-shadow(0 0 8px #fbbf24)}.theme-realistic .valid-move:after{background-color:#fff6;border:1px dashed white}.piece{width:100%;height:100%;position:relative;cursor:pointer;z-index:10;transition:transform .2s ease,filter .2s ease;display:flex;align-items:center;justify-content:center;padding:4px;background:transparent}.piece-sprite{width:100%;height:100%;background-image:url(/assets/characters.png);background-size:200% 200%;background-repeat:no-repeat;pointer-events:none;mix-blend-mode:multiply}.piece-sprite.white{filter:hue-rotate(180deg) saturate(1.2)}.piece:hover{transform:translateY(-8%) scale(1.05);z-index:20}.piece:hover .piece-sprite{filter:drop-shadow(2px 4px 6px rgba(0,0,0,.5))}.piece:hover .piece-sprite.white{filter:drop-shadow(2px 4px 6px rgba(0,0,0,.5)) hue-rotate(180deg) saturate(1.2)}.piece.selected-piece{transform:translateY(-12%) scale(1.1);z-index:30;animation:bounce-selected .8s ease-in-out infinite}.piece.selected-piece .piece-sprite{filter:drop-shadow(0 0 8px var(--goalie-yellow, #FDD835)) drop-shadow(0 0 16px var(--goalie-yellow, #FDD835)) drop-shadow(2px 4px 4px rgba(0,0,0,.3))}.piece.selected-piece .piece-sprite.white{filter:drop-shadow(0 0 8px var(--goalie-yellow, #FDD835)) drop-shadow(0 0 16px var(--goalie-yellow, #FDD835)) drop-shadow(2px 4px 4px rgba(0,0,0,.3)) hue-rotate(180deg) saturate(1.2)}.piece.can-kick{animation:pulse-kick 1.2s ease-in-out infinite}.piece.can-kick .piece-sprite{filter:drop-shadow(0 0 6px var(--goalie-yellow, #FDD835)) drop-shadow(2px 4px 4px rgba(0,0,0,.3))}.piece.can-kick .piece-sprite.white{filter:drop-shadow(0 0 6px var(--goalie-yellow, #FDD835)) drop-shadow(2px 4px 4px rgba(0,0,0,.3)) hue-rotate(180deg) saturate(1.2)}@keyframes bounce-selected{0%,to{transform:translateY(-12%) scale(1.1)}50%{transform:translateY(-18%) scale(1.12)}}@keyframes pulse-kick{0%,to{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.15);transform:scale(1.03)}}@media (prefers-reduced-motion: reduce){.piece{transition:none}.piece.selected-piece,.piece.can-kick{animation:none}.piece:hover{transform:none}}.ball-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.soccer-ball{width:60%;height:60%;border-radius:50%;background-color:#fff;background-image:radial-gradient(circle at 35% 35%,#000 12%,transparent 12.5%),radial-gradient(circle at 65% 35%,#000 12%,transparent 12.5%),radial-gradient(circle at 50% 65%,#000 16%,transparent 16.5%);border:2px solid #000;box-shadow:inset 0 0 8px #0000004d,0 2px 8px #0003;z-index:5;transition:all .3s ease}.kick-phase-ball{animation:ball-pulse 1.2s infinite}.no-kick-indicator{position:absolute;top:-8px;right:-8px;width:20px;height:20px;background:linear-gradient(135deg,#f59e0b,#d97706);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;box-shadow:0 2px 4px #0003;transition:all .2s ease;animation:no-kick-pulse 2s ease-in-out infinite}.no-kick-indicator:hover{background:linear-gradient(135deg,#d97706,#b45309);transform:scale(1.1);box-shadow:0 3px 6px #0000004d;animation:none}.no-kick-icon{color:#fff;font-size:10px;font-weight:700;line-height:1}@keyframes ball-pulse{0%,to{transform:scale(1);box-shadow:0 0 15px #6b8a7acc,inset 0 0 8px #0000004d}50%{transform:scale(1.1);box-shadow:0 0 25px #a4c3a2e6,inset 0 0 8px #0000004d}}@keyframes no-kick-pulse{0%,to{box-shadow:0 2px 4px #0003,0 0 #f59e0b66}50%{box-shadow:0 2px 4px #0003,0 0 0 6px #f59e0b00}}.soccer-ball.realistic{background:none!important;border:none!important;box-shadow:none!important}.ball-sprite{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}@media (max-width: 768px){.no-kick-indicator{width:24px;height:24px;top:-10px;right:-10px}.no-kick-icon{font-size:12px}}.board-cell{aspect-ratio:1 / 1;display:flex;justify-content:center;align-items:center;position:relative;box-shadow:inset 0 0 0 1px #ffffff26;transition:all .3s ease;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;height:100%;background-image:linear-gradient(0deg,transparent 24%,rgba(255,255,255,.08) 25%,rgba(255,255,255,.08) 26%,transparent 27%,transparent 74%,rgba(255,255,255,.08) 75%,rgba(255,255,255,.08) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(255,255,255,.08) 25%,rgba(255,255,255,.08) 26%,transparent 27%,transparent 74%,rgba(255,255,255,.08) 75%,rgba(255,255,255,.08) 76%,transparent 77%,transparent);background-size:4px 4px}.penalty-box{background-color:#ffffff14}.goal{background-color:var(--defender-green-dark);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.15) 0,rgba(255,255,255,.15) 1px,transparent 1px,transparent 8px);box-shadow:inset 0 0 20px #0003}.mid-line{border-right:3px solid rgba(255,255,255,.9);position:relative}.center-circle{position:relative}.center-circle:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:120px;border:3px solid rgba(255,255,255,.9);border-radius:50%;pointer-events:none;z-index:1}.goal-area-top{border-bottom:3px solid rgba(255,255,255,.9)}.goal-area-bottom{border-top:3px solid rgba(255,255,255,.9)}.goal-area-left{border-right:3px solid rgba(255,255,255,.9)}.goal-area-right{border-left:3px solid rgba(255,255,255,.9)}.penalty-area-top{border-bottom:3px solid rgba(255,255,255,.9)}.penalty-area-bottom{border-top:3px solid rgba(255,255,255,.9)}.penalty-area-left{border-right:3px solid rgba(255,255,255,.9)}.penalty-area-right{border-left:3px solid rgba(255,255,255,.9)}.corner-top-left:after{content:"";position:absolute;bottom:-2px;right:-2px;width:24px;height:24px;border-bottom:3px solid rgba(255,255,255,.9);border-right:3px solid rgba(255,255,255,.9);border-bottom-right-radius:24px}.corner-top-right:after{content:"";position:absolute;bottom:-2px;left:-2px;width:24px;height:24px;border-bottom:3px solid rgba(255,255,255,.9);border-left:3px solid rgba(255,255,255,.9);border-bottom-left-radius:24px}.corner-bottom-left:after{content:"";position:absolute;top:-2px;right:-2px;width:24px;height:24px;border-top:3px solid rgba(255,255,255,.9);border-right:3px solid rgba(255,255,255,.9);border-top-right-radius:24px}.corner-bottom-right:after{content:"";position:absolute;top:-2px;left:-2px;width:24px;height:24px;border-top:3px solid rgba(255,255,255,.9);border-left:3px solid rgba(255,255,255,.9);border-top-left-radius:24px}.penalty-spot:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background-color:#fffffff2;border-radius:50%;z-index:2;box-shadow:0 2px 4px #0003}.last-move-from{background-color:#ffffff26;position:relative}.last-move-from:after{content:"";position:absolute;width:60%;height:60%;border:3px dashed rgba(255,255,255,.6);border-radius:50%;box-shadow:0 0 12px #ffffff4d}.last-move-to{background-color:#fdd83559;box-shadow:inset 0 0 20px #fdd83566;position:relative}.last-move-to:after{content:"";position:absolute;width:100%;height:100%;border:3px solid rgba(253,216,53,.7);border-radius:6px;pointer-events:none}.valid-move{position:relative}.valid-move:after{content:"";position:absolute;width:40%;height:40%;background:linear-gradient(135deg,var(--defender-green) 0%,var(--defender-green-dark) 100%);border-radius:50%;box-shadow:0 0 12px #43a04780;animation:pulse-dot 2s infinite}.valid-kick{position:relative}.valid-kick:after{content:"";position:absolute;width:100%;height:100%;border:4px solid var(--goalie-yellow);border-radius:8px;box-shadow:0 0 20px #fdd83566,inset 0 0 20px #fdd83566;animation:pulse-border 1.5s infinite}@keyframes pulse-dot{0%{transform:scale(.9);opacity:.7}50%{transform:scale(1.15);opacity:1}to{transform:scale(.9);opacity:.7}}@keyframes pulse-border{0%{opacity:.6;box-shadow:0 0 12px #fdd8354d,inset 0 0 12px #fdd8354d}50%{opacity:1;box-shadow:0 0 25px #fdd83599,inset 0 0 25px #fdd83599}to{opacity:.6;box-shadow:0 0 12px #fdd8354d,inset 0 0 12px #fdd8354d}}@media (prefers-reduced-motion: reduce){.board-cell{transition:none}.valid-move:after,.valid-kick:after{animation:none}}.game-board-wrapper{display:flex;flex-direction:column;font-family:Nunito,monospace;background:linear-gradient(180deg,#fff,#f0f0f0);padding:8px;border-radius:20px;position:relative;width:-moz-fit-content;width:fit-content;max-width:100%;box-sizing:border-box;margin:0 auto;box-shadow:0 10px 40px -10px #0000004d,0 0 0 4px #ffffffe6,inset 0 2px #fff;border:3px solid var(--defender-green)}.game-board-wrapper:before,.game-board-wrapper:after{content:"";position:absolute;width:40px;height:40px;border:3px solid var(--goalie-yellow);border-radius:50%;opacity:.6}.game-board-wrapper:before{top:-8px;left:-8px;border-right-color:transparent;border-bottom-color:transparent}.game-board-wrapper:after{top:-8px;right:-8px;border-left-color:transparent;border-bottom-color:transparent}.coordinate-row{display:flex;align-items:center;justify-content:center;position:relative;width:100%}.coordinate-row.top{margin-bottom:4px}.coordinate-row.bottom{margin-top:4px}.coordinate-column{display:flex;flex-direction:column;justify-content:space-around;align-items:center}.coordinate-column.left{margin-right:4px}.coordinate-column.right{margin-left:4px}.board-container{display:flex;align-items:center;justify-content:center;position:relative;width:100%}.coordinate-label{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--defender-green-dark);background-color:transparent;min-width:22px;min-height:22px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.coordinate-corner{min-width:22px;min-height:22px;background-color:transparent}@media (min-width: 1024px){.coordinate-label{font-size:12px;min-width:26px;min-height:26px}.coordinate-corner{min-width:26px;min-height:26px}}@media (max-width: 768px){.coordinate-label{font-size:9px;min-width:18px;min-height:18px}.coordinate-corner{min-width:18px;min-height:18px}.game-board-wrapper{padding:6px;border-radius:16px}}@media (max-width: 480px){.coordinate-label{font-size:8px;min-width:14px;min-height:14px}.coordinate-corner{min-width:14px;min-height:14px}}.game-board{display:grid;grid-template-columns:repeat(19,minmax(0,1fr));border:4px solid var(--defender-green-dark);background:linear-gradient(135deg,var(--field-green) 0%,var(--field-green-dark) 100%);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px -12px #00000059,inset 0 0 30px #0000001a;aspect-ratio:19/15;width:min(90vw,80vh * 19/15);height:min(80vh,90vw * 15/19);max-width:900px;max-height:calc(900px * 15/19)}@media (min-width: 1024px){.game-board{width:min(60vw,85vh * 19/15);height:min(85vh,60vw * 15/19);max-width:850px;max-height:calc(850px * 15/19);border-width:4px}}@media (min-width: 769px) and (max-width: 1023px) and (orientation: landscape){.game-board{width:min(60vw,75vh * 19/15);height:min(75vh,60vw * 15/19)}}@media (min-width: 481px) and (max-width: 768px){.game-board{width:min(90vw,60vh * 19/15);height:min(60vh,90vw * 15/19);border-width:3px;border-radius:12px}}@media (max-width: 480px){.game-board{width:min(95vw,50vh * 19/15);height:min(50vh,95vw * 15/19);border-radius:10px;border-width:3px;box-shadow:0 15px 30px -8px #00000040}.game-board-wrapper{border-radius:12px;border-width:2px}}@media (max-width: 360px),(max-height: 640px){.game-board{min-width:475px;min-height:375px;width:min(95vw,50vh * 19/15);height:min(50vh,95vw * 15/19)}}@media (min-width: 1440px) and (min-aspect-ratio: 16/9){.game-board{max-width:1000px;max-height:calc(1000px * 15/19)}}@media (min-height: 1000px){.game-board{max-height:70vh;width:min(70vh * 19/15,60vw)}}.game-info-compact{display:flex;justify-content:center;align-items:center;margin-bottom:.75rem;min-height:3rem;gap:.75rem}.compact-status{display:flex;align-items:center;gap:.875rem;padding:.625rem 1.25rem;background:var(--card-white);border-radius:1rem;border:3px solid var(--midfielder-blue);box-shadow:0 4px 0 var(--midfielder-blue-dark),0 8px 20px #1e88e533}.compact-player{display:flex;align-items:center;gap:.5rem;padding:.5rem .875rem;border-radius:.75rem;font-weight:800;font-size:.9rem;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.compact-player.player-white{background:linear-gradient(180deg,#fafafa,#e0e0e0);color:var(--text-dark);border:2px solid #BDBDBD}.compact-player.player-black{background:linear-gradient(180deg,#424242,#212121);color:#fff;border:2px solid #000}.compact-icon{font-size:1rem;display:flex;align-items:center}.ai-indicator{font-size:.9rem;margin-left:.25rem}.compact-action{display:flex;align-items:center;padding:.375rem .625rem;border-radius:.5rem;font-weight:700;font-size:.75rem}.compact-action.action-move{background:linear-gradient(135deg,var(--defender-green) 0%,var(--defender-green-dark) 100%);color:#fff;box-shadow:0 2px 0 var(--defender-green-dark)}.compact-action.action-kick{background:linear-gradient(135deg,var(--goalie-yellow) 0%,var(--goalie-yellow-dark) 100%);color:var(--text-dark);box-shadow:0 2px 0 var(--goalie-yellow-dark);animation:compact-kick-pulse 2s ease-in-out infinite}@keyframes compact-kick-pulse{0%,to{box-shadow:0 2px 0 var(--goalie-yellow-dark),0 0 #fdd83566}50%{box-shadow:0 2px 0 var(--goalie-yellow-dark),0 0 0 6px #fdd83500}}.action-icon{font-size:.9rem}.thinking-indicator{display:flex;align-items:center}.thinking-indicator .spinner{animation:spin 1s linear infinite;font-size:.9rem}.compact-message{background:linear-gradient(135deg,#fff8e1,#ffecb3);border:2px solid var(--goalie-yellow);padding:.5rem .875rem;border-radius:.625rem;color:var(--text-dark);font-size:.8rem;font-weight:700;line-height:1.3;max-width:220px}.ai-thinking-message{background:linear-gradient(135deg,#e3f2fd,#bbdefb);border:2px solid var(--midfielder-blue);padding:.5rem .875rem;border-radius:.625rem;color:var(--midfielder-blue-dark);font-size:.8rem;font-weight:700}.theme-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--card-white);border:3px solid var(--defender-green);border-radius:.875rem;color:var(--defender-green);cursor:pointer;transition:all .2s ease;box-shadow:0 3px 0 var(--defender-green-dark),0 6px 12px #43a04733}.theme-toggle:hover{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);transform:translateY(-2px);box-shadow:0 5px 0 var(--defender-green-dark),0 8px 16px #43a0474d}.theme-toggle:active{transform:translateY(1px);box-shadow:0 1px 0 var(--defender-green-dark),0 2px 4px #43a04733}@media (max-width: 768px){.compact-status{padding:.5rem 1rem;gap:.625rem;border-width:2px}.compact-player{padding:.375rem .75rem;font-size:.85rem}.compact-message{max-width:160px;font-size:.75rem}.theme-toggle{width:38px;height:38px;border-width:2px}}@media (max-width: 480px){.game-info-compact{flex-wrap:wrap;gap:.5rem}.compact-status{padding:.4rem .75rem}.compact-player{padding:.3rem .625rem;font-size:.8rem}.theme-toggle{width:36px;height:36px}}.sidebar-panel{font-family:Nunito,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--card-white);border-radius:24px;overflow:hidden;color:var(--text-dark);box-shadow:0 10px 40px -10px #0003,0 0 0 4px #fffc,inset 0 1px #fff;border:3px solid var(--midfielder-blue);position:relative}.sidebar-panel:before{content:"";position:absolute;top:0;left:0;right:0;height:120px;background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.2) 50%,transparent 100%);pointer-events:none;z-index:0}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background:linear-gradient(135deg,var(--midfielder-blue) 0%,var(--midfielder-blue-dark) 100%);position:relative;z-index:1}.header-title{display:flex;align-items:center;gap:.75rem}.header-logo{width:44px;height:44px;border-radius:12px;-o-object-fit:contain;object-fit:contain;background:#fff;padding:4px;box-shadow:0 2px 8px #0003}.header-title h1{font-family:Bangers,cursive;font-size:1.75rem;font-weight:400;letter-spacing:.03em;margin:0;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.2)}.header-actions{display:flex;gap:.5rem}.action-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:12px;background:#fff3;color:#fff;cursor:pointer;transition:all .2s ease;box-shadow:0 2px #0000001a}.action-btn:hover{background:#ffffff4d;transform:translateY(-2px);box-shadow:0 4px #0000001a}.action-btn:active{transform:translateY(1px);box-shadow:0 1px #0000001a}.action-btn.skip{background:var(--goalie-yellow);color:var(--text-dark)}.action-btn.skip:hover{background:#ffeb3b}.section-tabs{display:flex;padding:.75rem;gap:.5rem;background:linear-gradient(180deg,#e3f2fd,#f5f5f5);border-bottom:2px solid rgba(0,0,0,.05);position:relative;z-index:1}.tab{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;border:2px solid transparent;border-radius:12px;background:#fff;color:var(--text-medium);font-family:Nunito,sans-serif;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000000d}.tab:hover{color:var(--midfielder-blue);border-color:var(--midfielder-blue);transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.tab.active{background:linear-gradient(135deg,var(--midfielder-blue) 0%,var(--midfielder-blue-dark) 100%);color:#fff;border-color:var(--midfielder-blue-dark);box-shadow:0 4px 0 var(--midfielder-blue-dark),0 6px 12px #1e88e54d;transform:translateY(-2px)}.tab.active:hover{transform:translateY(-2px)}.section-content{padding:1.25rem;max-height:calc(100vh - 220px);overflow-y:auto;position:relative;z-index:1;background:linear-gradient(180deg,#fafafa,#fff)}.section-content::-webkit-scrollbar{width:8px}.section-content::-webkit-scrollbar-track{background:#e0e0e0;border-radius:4px}.section-content::-webkit-scrollbar-thumb{background:var(--midfielder-blue);border-radius:4px}.play-section{display:flex;flex-direction:column;gap:1rem}.subsection{background:#fff;border:2px solid #E0E0E0;border-radius:16px;overflow:hidden;box-shadow:0 2px 8px #0000000d}.subsection-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;cursor:pointer;transition:background .2s ease;background:linear-gradient(180deg,#fafafa,#fff)}.subsection-header:hover{background:#f5f5f5}.subsection-title{display:flex;align-items:center;gap:.75rem;font-weight:800;font-size:1rem;color:var(--text-dark)}.subsection-title svg{color:var(--midfielder-blue)}.chevron{color:var(--text-light);transition:transform .2s ease}.chevron.expanded{transform:rotate(180deg)}.subsection-body{padding:0 1.25rem 1.25rem;display:flex;flex-direction:column;gap:1rem}.difficulty-dropdown{position:relative}.dropdown-trigger{display:flex;justify-content:space-between;align-items:center;width:100%;padding:.875rem 1rem;background:linear-gradient(180deg,#fafafa,#fff);border:2px solid #E0E0E0;border-radius:12px;color:var(--text-dark);font-family:inherit;font-size:.95rem;cursor:pointer;transition:all .2s ease}.dropdown-trigger:hover{border-color:var(--midfielder-blue);box-shadow:0 2px 8px #1e88e526}.dropdown-value{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;overflow:hidden}.difficulty-name{font-weight:800;color:var(--midfielder-blue)}.difficulty-desc{font-size:.8rem;color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.dropdown-arrow{color:var(--text-light);flex-shrink:0;transition:transform .2s ease}.dropdown-arrow.open{transform:rotate(180deg)}.dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:2px solid var(--midfielder-blue);border-radius:16px;overflow:hidden;z-index:100;box-shadow:0 12px 32px #0003;animation:dropdown-enter .2s ease}@keyframes dropdown-enter{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.dropdown-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:.875rem 1rem;background:transparent;border:none;border-bottom:1px solid #E0E0E0;color:var(--text-dark);font-family:inherit;cursor:pointer;transition:background .15s ease}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background:#e3f2fd}.dropdown-item.selected{background:linear-gradient(135deg,#e3f2fd,#bbdefb)}.dropdown-item .item-content{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}.dropdown-item .item-name{font-weight:700;font-size:.95rem}.dropdown-item .item-desc{font-size:.8rem;color:var(--text-light)}.dropdown-item svg{color:var(--midfielder-blue)}.team-select{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.team-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1rem;border:3px solid;border-radius:12px;font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer;transition:all .2s ease}.team-btn.white{background:linear-gradient(180deg,#fafafa,#e0e0e0);color:var(--text-dark);border-color:#bdbdbd;box-shadow:0 3px #9e9e9e}.team-btn.white:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px #9e9e9e,0 8px 15px #00000026}.team-btn.black{background:linear-gradient(180deg,#424242,#212121);color:#fff;border-color:#000;box-shadow:0 3px #000}.team-btn.black:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px #000,0 8px 15px #00000040}.team-btn:active:not(:disabled){transform:translateY(1px)}.team-btn:disabled{opacity:.5;cursor:not-allowed}.team-indicator{width:16px;height:16px;border-radius:50%;border:2px solid}.team-indicator.white-piece{background:#fff;border-color:var(--text-dark)}.team-indicator.black-piece{background:var(--text-dark);border-color:#fff}.quick-play{padding-top:.5rem}.quick-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;padding:1rem 1.25rem;border:none;border-radius:14px;font-family:Bangers,cursive;font-size:1.25rem;letter-spacing:.03em;cursor:pointer;transition:all .2s ease}.quick-btn.primary{background:linear-gradient(180deg,var(--defender-green) 0%,var(--defender-green-dark) 100%);color:#fff;box-shadow:0 4px 0 var(--defender-green-dark),0 6px 16px #43a04766;text-shadow:1px 1px 0 rgba(0,0,0,.2)}.quick-btn.primary:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--defender-green-dark),0 10px 24px #43a04780}.quick-btn.primary:active{transform:translateY(1px);box-shadow:0 2px 0 var(--defender-green-dark),0 3px 8px #43a0474d}.ai-active{display:flex;flex-direction:column;gap:1rem}.ai-status-card{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);border:2px solid var(--defender-green);border-radius:16px;padding:1.25rem;box-shadow:0 4px 12px #43a04733}.status-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.875rem}.team-badge{display:flex;align-items:center;gap:.5rem;padding:.5rem .875rem;border-radius:10px;font-size:.9rem;font-weight:700;box-shadow:0 2px 4px #0000001a}.team-badge.white{background:linear-gradient(180deg,#fafafa,#e0e0e0);color:var(--text-dark);border:2px solid #BDBDBD}.team-badge.black{background:linear-gradient(180deg,#424242,#212121);color:#fff;border:2px solid #000}.stop-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:10px;background:linear-gradient(180deg,var(--striker-red) 0%,var(--striker-red-dark) 100%);color:#fff;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 0 var(--striker-red-dark)}.stop-btn:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--striker-red-dark)}.status-info{display:flex;gap:.5rem;margin-bottom:.75rem;flex-wrap:wrap}.difficulty-badge{font-size:.8rem;font-weight:700;color:var(--defender-green-dark);background:#fff;padding:.375rem .625rem;border-radius:8px;border:1px solid var(--defender-green)}.move-count{font-size:.8rem;font-weight:600;color:var(--text-medium);background:#fff;padding:.375rem .625rem;border-radius:8px;border:1px solid #E0E0E0}.thinking-indicator{display:flex;align-items:center;gap:.625rem;padding:.625rem .875rem;background:#fff;border:2px solid var(--goalie-yellow);border-radius:10px;font-size:.9rem;font-weight:600;color:var(--goalie-yellow-dark)}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.last-move{font-size:.85rem;color:var(--text-medium);padding:.625rem .875rem;background:#fff;border-radius:10px;border:1px solid #E0E0E0}.pvp-option{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;background:linear-gradient(135deg,#fff8e1,#ffecb3);border:2px dashed var(--goalie-yellow);border-radius:12px;font-size:.85rem;font-weight:600;color:var(--text-medium)}.pvp-option svg{color:var(--goalie-yellow-dark)}.learn-section{display:flex;flex-direction:column;gap:1.25rem}.rules-summary{display:flex;flex-direction:column;gap:.75rem}.rule-item{display:flex;align-items:center;gap:.875rem;padding:.875rem 1rem;background:#fff;border:2px solid #E0E0E0;border-radius:12px;transition:all .2s ease}.rule-item:hover{transform:translate(4px);border-color:var(--midfielder-blue);box-shadow:0 2px 8px #1e88e526}.rule-number{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:linear-gradient(135deg,var(--midfielder-blue) 0%,var(--midfielder-blue-dark) 100%);color:#fff;font-size:.85rem;font-weight:800;border-radius:8px;flex-shrink:0;box-shadow:0 2px 0 var(--midfielder-blue-dark)}.rule-item.goal{background:linear-gradient(135deg,#fff8e1,#ffecb3);border-color:var(--goalie-yellow)}.rule-item.goal svg{color:var(--goalie-yellow-dark);flex-shrink:0}.rule-content{font-size:.9rem;color:var(--text-dark);line-height:1.4;font-weight:600}.rule-content strong{color:var(--midfielder-blue);font-weight:800}.pieces-section{margin-top:.25rem}.pieces-title{font-family:Bangers,cursive;font-size:1.1rem;font-weight:400;letter-spacing:.03em;color:var(--text-dark);margin-bottom:.875rem}.pieces-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.piece-card{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem;background:#fff;border:2px solid #E0E0E0;border-radius:14px;transition:all .2s ease;box-shadow:0 2px 4px #0000000d}.piece-card:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 8px 20px #00000026}.piece-card.striker{border-color:var(--striker-red)}.piece-card.striker:hover{background:linear-gradient(135deg,#ffebee,#fff)}.piece-card.midfielder{border-color:var(--midfielder-blue)}.piece-card.midfielder:hover{background:linear-gradient(135deg,#e3f2fd,#fff)}.piece-card.defender{border-color:var(--defender-green)}.piece-card.defender:hover{background:linear-gradient(135deg,#e8f5e9,#fff)}.piece-card.goalie{border-color:var(--goalie-yellow)}.piece-card.goalie:hover{background:linear-gradient(135deg,#fff8e1,#fff)}.piece-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;flex-shrink:0;box-shadow:0 2px 4px #00000026}.piece-card.striker .piece-icon{background:linear-gradient(135deg,var(--striker-red) 0%,var(--striker-red-dark) 100%);color:#fff}.piece-card.midfielder .piece-icon{background:linear-gradient(135deg,var(--midfielder-blue) 0%,var(--midfielder-blue-dark) 100%);color:#fff}.piece-card.defender .piece-icon{background:linear-gradient(135deg,var(--defender-green) 0%,var(--defender-green-dark) 100%);color:#fff}.piece-card.goalie .piece-icon{background:linear-gradient(135deg,var(--goalie-yellow) 0%,var(--goalie-yellow-dark) 100%);color:var(--text-dark)}.piece-info{display:flex;flex-direction:column;gap:.2rem;min-width:0}.piece-name{font-size:.85rem;font-weight:800;color:var(--text-dark)}.piece-desc{font-size:.75rem;color:var(--text-medium);line-height:1.3}.piece-bonus{font-size:.7rem;color:var(--defender-green);font-weight:700}.connect-section{display:flex;flex-direction:column;gap:1.25rem}.user-status{padding:1rem 1.25rem;background:#fff;border:2px solid #E0E0E0;border-radius:14px}.logged-in{display:flex;align-items:center;gap:.875rem}.user-avatar{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:linear-gradient(135deg,var(--midfielder-blue) 0%,var(--midfielder-blue-dark) 100%);color:#fff;font-size:1.25rem;font-weight:800;border-radius:12px;box-shadow:0 3px 0 var(--midfielder-blue-dark)}.user-info{display:flex;flex-direction:column;gap:.25rem}.user-name{font-size:1rem;font-weight:700;color:var(--text-dark)}.user-badge{font-size:.75rem;font-weight:700;color:var(--defender-green)}.guest-mode{display:flex;flex-direction:column;gap:.75rem}.guest-label{font-size:.9rem;font-weight:600;color:var(--text-medium)}.login-link{display:flex;align-items:center;gap:.625rem;padding:.75rem 1rem;background:linear-gradient(135deg,#e3f2fd,#bbdefb);border:2px solid var(--midfielder-blue);border-radius:10px;color:var(--midfielder-blue-dark);font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer;transition:all .2s ease}.login-link:hover{background:linear-gradient(135deg,#bbdefb,#90caf9);transform:translateY(-2px);box-shadow:0 4px 8px #1e88e533}.multiplayer-section{display:flex;flex-direction:column;gap:.875rem}.mp-title{display:flex;align-items:center;gap:.625rem;font-family:Bangers,cursive;font-size:1.1rem;font-weight:400;letter-spacing:.03em;color:var(--text-dark);margin:0}.mp-title svg{color:var(--midfielder-blue)}.create-room-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem 1.25rem;background:linear-gradient(180deg,var(--midfielder-blue) 0%,var(--midfielder-blue-dark) 100%);border:none;border-radius:12px;color:#fff;font-family:Nunito,sans-serif;font-size:1rem;font-weight:800;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 0 var(--midfielder-blue-dark),0 6px 16px #1e88e54d}.create-room-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 0 var(--midfielder-blue-dark),0 8px 20px #1e88e566}.create-room-btn:active:not(:disabled){transform:translateY(1px);box-shadow:0 2px 0 var(--midfielder-blue-dark),0 3px 8px #1e88e533}.create-room-btn:disabled{opacity:.6;cursor:not-allowed}.join-room{display:flex;gap:.625rem}.room-input{flex:1;padding:.875rem 1rem;background:#fff;border:3px solid #E0E0E0;border-radius:12px;color:var(--text-dark);font-family:Nunito,monospace;font-size:1.1rem;font-weight:800;letter-spacing:.2em;text-align:center;text-transform:uppercase;transition:all .2s ease}.room-input::-moz-placeholder{color:var(--text-light);letter-spacing:.1em;font-size:.9rem;font-weight:600}.room-input::placeholder{color:var(--text-light);letter-spacing:.1em;font-size:.9rem;font-weight:600}.room-input:focus{outline:none;border-color:var(--midfielder-blue);box-shadow:0 0 0 4px #1e88e533}.join-btn{display:flex;align-items:center;justify-content:center;width:52px;height:52px;background:linear-gradient(180deg,var(--defender-green) 0%,var(--defender-green-dark) 100%);border:none;border-radius:12px;color:#fff;cursor:pointer;transition:all .2s ease;box-shadow:0 3px 0 var(--defender-green-dark)}.join-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 0 var(--defender-green-dark)}.join-btn:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 0 var(--defender-green-dark)}.join-btn:disabled{opacity:.4;cursor:not-allowed}.session-info{display:flex;flex-direction:column;gap:.5rem;padding:1rem;background:linear-gradient(135deg,#f5f5f5,#eee);border-radius:12px;border:2px solid #E0E0E0}.info-row{display:flex;justify-content:space-between;align-items:center}.info-label{font-size:.85rem;font-weight:600;color:var(--text-light)}.info-value{font-size:.85rem;font-weight:800;color:var(--text-dark);padding:.25rem .625rem;background:#fff;border-radius:6px}.info-value.online{color:var(--defender-green);background:linear-gradient(135deg,#e8f5e9,#c8e6c9)}.info-value.local{color:var(--midfielder-blue);background:linear-gradient(135deg,#e3f2fd,#bbdefb)}.info-value.active{color:var(--goalie-yellow-dark);background:linear-gradient(135deg,#fff8e1,#ffecb3)}@media (max-width: 1200px){.sidebar-panel{border-radius:20px}.pieces-grid{grid-template-columns:1fr}}@media (max-width: 768px){.sidebar-panel{border-radius:16px;border-width:2px}.sidebar-header{padding:.875rem 1rem}.header-title h1{font-size:1.5rem}.header-logo{width:36px;height:36px}.section-content{padding:1rem}.quick-btn{font-size:1.1rem;padding:.875rem 1rem}}@media (prefers-reduced-motion: reduce){.tab,.action-btn,.team-btn,.quick-btn,.piece-card,.dropdown-menu,.rule-item{transition:none}.spin{animation:none}@keyframes dropdown-enter{0%{opacity:1;transform:none}to{opacity:1;transform:none}}.piece-card:hover{transform:none}}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;max-width:100%;overflow-x:hidden;padding:env(safe-area-inset-top,1rem) env(safe-area-inset-right,1rem) env(safe-area-inset-bottom,1rem) env(safe-area-inset-left,1rem)}.main-content{display:flex;flex-direction:row;gap:2rem;width:100%;max-width:1400px;margin:0 auto;flex:1;align-items:flex-start}.game-area{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-width:0;min-height:0}.sidebar{width:380px;flex-shrink:0;max-height:calc(100vh - 2rem);overflow:visible;padding:.5rem;box-sizing:border-box}.celebration{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:radial-gradient(circle,#fdd8354d,#0000004d)}.celebration-content{display:flex;align-items:center;justify-content:center;height:100%}.goal-text{font-family:Bangers,cursive;font-size:6rem;font-weight:400;letter-spacing:.05em;color:var(--goalie-yellow);text-shadow:4px 4px 0 var(--goalie-yellow-dark),8px 8px 0 rgba(0,0,0,.2),0 0 60px rgba(253,216,53,.5);animation:goal-celebration 2s ease-out}@keyframes goal-celebration{0%{transform:scale(0) rotate(-15deg);opacity:0}30%{transform:scale(1.3) rotate(5deg);opacity:1}50%{transform:scale(1) rotate(-3deg)}70%{transform:scale(1.1) rotate(2deg)}to{transform:scale(1) rotate(0);opacity:1}}@media (max-width: 1200px){.main-content{gap:1.5rem}.sidebar{width:340px}}@media (max-width: 1024px){.main-content{flex-direction:column;gap:1.5rem;align-items:center}.sidebar{width:100%;max-width:600px;order:1}.game-area{order:2;width:100%}}@media (max-width: 768px){.app{padding:.5rem}.main-content{gap:1rem}.sidebar{max-width:100%;padding:.25rem}.goal-text{font-size:4rem}}@media (max-width: 480px){.app{padding:.25rem}.main-content{gap:.75rem}.sidebar{padding:.125rem}.goal-text{font-size:3rem}}@media (max-width: 360px){.goal-text{font-size:2.5rem}}@media (max-width: 768px) and (orientation: landscape){.main-content{flex-direction:row;align-items:flex-start}.sidebar{width:300px;max-height:90vh;order:2}.game-area{order:1;flex:1}}@media (hover: none) and (pointer: coarse){.sidebar{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}}.splash-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(135deg,#1e293b,#0f172a);display:flex;align-items:center;justify-content:center;z-index:9999}.splash-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;animation:fadeIn .5s ease-out}.logo-container{width:120px;height:120px;background:#ffffff1a;border-radius:24px;padding:16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 32px #0003;display:flex;align-items:center;justify-content:center}.app-logo{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.2))}.app-title{font-family:Outfit,sans-serif;font-weight:700;font-size:2rem;color:#f8fafc;letter-spacing:-.02em;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.3)}.loading-indicator{display:flex;gap:8px;margin-top:1rem}.spinner-dot{width:10px;height:10px;background-color:#3b82f6;border-radius:50%;animation:bounce 1.4s infinite ease-in-out both}.spinner-dot:nth-child(1){animation-delay:-.32s}.spinner-dot:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0);opacity:.5}40%{transform:scale(1);opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}