:root{--bg-void: #0a0612;--bg-purple: #1a0f2e;--bg-card: #150d24;--bg-card-hover: #1d1230;--gold: #d4a84b;--gold-light: #f0d590;--gold-dark: #a67c2e;--purple: #6b4c9a;--purple-light: #9d7bc9;--purple-muted: #3d2a5c;--text: #e8e0f0;--text-muted: #a89bb8;--rose: #8b2942;--font-display: "Cinzel", serif;--font-body: "Cormorant Garamond", serif;--ease-out: cubic-bezier(.4, 0, .2, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--gold-rgb: 212, 168, 75;--purple-rgb: 107, 76, 154;--rose-rgb: 139, 41, 66;--bg-card-rgb: 21, 13, 36;--hover-glow: .1;--particle-hue: 35;--cell-1: #7eb3f0;--cell-2: #5ab87a;--cell-3: #e05555;--cell-4: #9d7bc9;--cell-5: #d4a84b;--cell-6: #4ecdc4;--cell-7: #e8e0f0;--cell-8: #a89bb8}.theme-bernkastel{--bg-void: #06090f;--bg-purple: #0a1020;--bg-card: #0c1424;--bg-card-hover: #101a30;--gold: #4a90d9;--gold-light: #7eb3f0;--gold-dark: #2a5a9a;--purple: #3d5a80;--purple-light: #7eb3f0;--purple-muted: #1a3050;--text: #e0eaf5;--text-muted: #9bb5d0;--gold-rgb: 74, 144, 217;--purple-rgb: 61, 90, 128;--bg-card-rgb: 12, 20, 36;--particle-hue: 215}.theme-erika{--bg-void: #060a0f;--bg-purple: #081420;--bg-card: #0a1824;--bg-card-hover: #0e2030;--gold: #00b4d8;--gold-light: #48cae4;--gold-dark: #0077b6;--purple: #2a5a80;--purple-light: #48cae4;--purple-muted: #153045;--text: #e0f0f5;--text-muted: #90c0d8;--gold-rgb: 0, 180, 216;--purple-rgb: 42, 90, 128;--bg-card-rgb: 10, 24, 36;--particle-hue: 190}.theme-lambdadelta{--bg-void: #120810;--bg-purple: #1f0a1a;--bg-card: #1a0815;--bg-card-hover: #25101e;--gold: #ff69b4;--gold-light: #ffb6d9;--gold-dark: #d4458a;--purple: #9a4a7a;--purple-light: #ffb6d9;--purple-muted: #4d2040;--text: #f5e0ef;--text-muted: #d09bb8;--gold-rgb: 255, 105, 180;--purple-rgb: 154, 74, 122;--bg-card-rgb: 26, 8, 21;--particle-hue: 330}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--bg-void);color:var(--text);min-height:100vh;background-image:radial-gradient(ellipse at 30% 20%,rgba(var(--purple-rgb),.08) 0%,transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(var(--gold-rgb),.04) 0%,transparent 60%);background-attachment:fixed;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}.particles-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}.header{text-align:center;padding:2rem 1rem 1rem;width:100%}.header h1{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2.5rem);font-weight:600;color:var(--gold);letter-spacing:.15em;text-transform:uppercase;text-shadow:0 0 30px rgba(var(--gold-rgb),.3)}.header .ornament{color:var(--gold-dark);font-size:.75rem;letter-spacing:.5em;margin-top:.5rem;text-shadow:0 0 15px rgba(var(--gold-rgb),.2)}.lobby{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:3rem 1.5rem;max-width:480px;width:100%}.lobby-card{background:linear-gradient(135deg,var(--bg-card),rgba(var(--bg-card-rgb),.6));border:1px solid var(--purple-muted);border-left:3px solid var(--gold);padding:2rem;width:100%;animation:fadeInUp .5s var(--ease-out)}.lobby-card h2{font-family:var(--font-display);font-size:1rem;font-weight:500;color:var(--gold);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}.lobby-card p{color:var(--text-muted);font-size:1.1rem;font-style:italic;margin-bottom:1.5rem;line-height:1.6}.character-selector{display:flex;gap:1rem;margin-bottom:2rem;width:100%}.character-card{flex:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem .5rem;background:linear-gradient(135deg,var(--bg-card),rgba(var(--bg-card-rgb),.6));border:1px solid var(--purple-muted);cursor:pointer;transition:all .3s var(--ease-out);overflow:hidden}.character-card:hover{border-color:var(--gold-dark);transform:translateY(-2px)}.character-card.selected{border-color:var(--gold);border-width:2px;background:linear-gradient(135deg,rgba(var(--gold-rgb),.08),rgba(var(--bg-card-rgb),.8));box-shadow:0 0 20px rgba(var(--gold-rgb),.15)}.character-portrait{width:80px;height:80px;object-fit:cover;object-position:top center;border-radius:50%;border:2px solid var(--purple-muted);transition:border-color .3s var(--ease-out)}.character-card.selected .character-portrait{border-color:var(--gold)}.character-name{font-family:var(--font-display);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);transition:color .3s var(--ease-out)}.character-card.selected .character-name{color:var(--gold)}.difficulty-selector{display:flex;gap:.5rem;margin-bottom:1.5rem}.difficulty-option{flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.75rem .5rem;background:transparent;border:1px solid var(--purple-muted);cursor:pointer;transition:all .2s var(--ease-out)}.difficulty-option:hover{border-color:var(--gold-dark)}.difficulty-option.selected{border-color:var(--gold);background:rgba(var(--gold-rgb),.08);box-shadow:0 0 15px rgba(var(--gold-rgb),.1)}.difficulty-label{font-family:var(--font-display);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);transition:color .2s var(--ease-out)}.difficulty-option.selected .difficulty-label{color:var(--gold)}.difficulty-desc{font-family:var(--font-body);font-size:.8rem;color:var(--text-muted);opacity:.7}.lobby-input{width:100%;padding:.75rem 1rem;background:var(--bg-purple);border:1px solid var(--purple-muted);color:var(--text);font-family:var(--font-display);font-size:1.2rem;letter-spacing:.3em;text-align:center;text-transform:uppercase;transition:border-color .2s var(--ease-out)}.lobby-input::placeholder{color:var(--text-muted);font-style:italic;letter-spacing:.1em;text-transform:none;font-family:var(--font-body);font-size:1rem}.lobby-input:focus{outline:none;border-color:var(--gold)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 2rem;font-family:var(--font-display);font-size:.85rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;transition:all .2s var(--ease-out);border:1px solid var(--purple-muted);background:transparent;color:var(--text-muted)}.btn:hover{border-color:var(--gold);color:var(--gold);box-shadow:0 0 20px rgba(var(--gold-rgb),var(--hover-glow))}.btn-primary{background:linear-gradient(135deg,var(--gold-dark),var(--gold));color:var(--bg-void);border-color:var(--gold)}.btn-primary:hover{box-shadow:0 0 25px rgba(var(--gold-rgb),.3);color:var(--bg-void)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn:disabled:hover{border-color:var(--purple-muted);color:var(--text-muted);box-shadow:none}.room-code{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--gold-light);letter-spacing:.4em;text-shadow:0 0 20px rgba(var(--gold-rgb),.4);padding:.5rem 0;-webkit-user-select:all;user-select:all}.waiting-text{color:var(--text-muted);font-style:italic;font-size:1.1rem;animation:pulse 2s ease-in-out infinite}.game-layout{display:flex;gap:2.5rem;padding:1rem 2rem 2rem;width:100%;justify-content:center;align-items:flex-start}.board-column{display:flex;flex-direction:column;align-items:center;gap:.75rem}.fighter-banner{width:100%;height:250px;position:relative;overflow:hidden;border:1px solid var(--purple-muted);border-bottom:2px solid var(--gold-dark);background:var(--bg-card)}.board-column:last-child .fighter-banner{border-bottom-color:var(--purple-muted)}.fighter-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;mask-image:linear-gradient(to bottom,black 65%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black 65%,transparent 100%)}.fighter-nameplate{position:absolute;bottom:.75rem;left:0;right:0;text-align:center;font-family:var(--font-display);font-size:1.1rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--gold);text-shadow:0 0 20px rgba(var(--gold-rgb),.6),0 2px 10px rgba(0,0,0,.9)}.fighter-nameplate.opponent{color:var(--purple-light);text-shadow:0 0 20px rgba(var(--purple-rgb),.6),0 2px 10px rgba(0,0,0,.9)}.board-stats{display:flex;gap:1.5rem;padding:.25rem 0}.stat-row{display:flex;align-items:baseline;gap:.5rem}.stat-label{font-family:var(--font-display);font-size:.9rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}.stat-value{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--gold-light);letter-spacing:.05em}.stat-value.flag{color:var(--rose)}.board-wrapper{position:relative}.sparkle-canvas{position:absolute;inset:0;pointer-events:none;z-index:10}.board{display:grid;gap:1px;background:var(--purple-muted);border:2px solid var(--purple-muted);box-shadow:0 0 30px rgba(var(--purple-rgb),.15);transition:box-shadow .3s}.board.main{--cell-size: 32px;grid-template-columns:repeat(var(--cols),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}.board.mini{--cell-size: 16px;grid-template-columns:repeat(var(--cols),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size));position:relative;z-index:1}.board.exploding{box-shadow:0 0 40px rgba(var(--rose-rgb),.3)}.cell{width:var(--cell-size);height:var(--cell-size);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:calc(var(--cell-size) * .5);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.cell.hidden{background:var(--bg-card);transition:background-color .15s}.cell.hidden:hover{background:var(--bg-card-hover);box-shadow:inset 0 0 8px rgba(var(--gold-rgb),.08)}.pending-text{font-family:var(--font-body);font-size:.95rem;font-style:italic;color:var(--text-muted);animation:pulse 2s ease-in-out infinite}.cell.hidden.pending{background:rgba(var(--gold-rgb),.15);box-shadow:inset 0 0 12px rgba(var(--gold-rgb),.25);animation:cellPending 1s ease-in-out infinite}.cell.revealed{background:var(--bg-purple);cursor:default;animation:cellReveal .35s var(--ease-spring) backwards;animation-delay:var(--anim-delay, 0ms)}.cell.flagged{background:var(--bg-card);color:var(--rose)}.cell.flagged.denied{animation:cellDenied .4s var(--ease-out)}.flag-icon{animation:flagPlant .3s var(--ease-spring);display:inline-block}.cell.mine{background:var(--rose);color:var(--text);cursor:default}.cell.mine.exploding{animation:mineExplode .4s var(--ease-spring);background:var(--rose)}.cell.mine.exploding .mine-icon{animation:mineShake .4s ease-in-out}.mine-icon{display:inline-block}.cell.val-1{color:var(--cell-1)}.cell.val-2{color:var(--cell-2)}.cell.val-3{color:var(--cell-3)}.cell.val-4{color:var(--cell-4)}.cell.val-5{color:var(--cell-5)}.cell.val-6{color:var(--cell-6)}.cell.val-7{color:var(--cell-7)}.cell.val-8{color:var(--cell-8)}.cell.revealed.val-1,.cell.revealed.val-2,.cell.revealed.val-3,.cell.revealed.val-4,.cell.revealed.val-5,.cell.revealed.val-6,.cell.revealed.val-7,.cell.revealed.val-8{text-shadow:0 0 6px currentColor}.board.mini .cell{cursor:default;font-size:0}.board.mini .cell.revealed{background:rgba(var(--purple-rgb),.4);animation:none}.board.mini .cell.flagged{background:rgba(var(--rose-rgb),.4)}.board.mini .cell.mine{background:var(--rose)}.game-over-overlay{position:fixed;inset:0;background:#000c;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s var(--ease-out);gap:2rem}.confetti-canvas{position:fixed;inset:0;z-index:101;pointer-events:none}.showdown{display:flex;align-items:center;gap:1rem}.showdown-fighter{position:relative;width:280px;height:320px;overflow:hidden;border:2px solid var(--purple-muted);background:var(--bg-card)}.showdown-fighter.left{animation:slideFromLeft .7s var(--ease-out) both;border-right:none}.showdown-fighter.right{animation:slideFromRight .7s var(--ease-out) both;border-left:none}.showdown-img{width:100%;height:100%;object-fit:cover;object-position:center 20%}.showdown-label{position:absolute;bottom:0;left:0;right:0;text-align:center;font-family:var(--font-display);font-size:1.4rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;padding:.5rem 0;animation:labelAppear .4s var(--ease-spring) .8s both}.showdown-label.win{color:var(--gold-light);text-shadow:0 0 30px rgba(var(--gold-rgb),.8),0 0 60px rgba(var(--gold-rgb),.4);background:linear-gradient(to top,rgba(0,0,0,.8) 0%,transparent 100%)}.showdown-label.lose{color:var(--rose);text-shadow:0 0 20px rgba(var(--rose-rgb),.6),0 0 40px rgba(var(--rose-rgb),.3);background:linear-gradient(to top,rgba(0,0,0,.8) 0%,transparent 100%)}.showdown-vs{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--text-muted);letter-spacing:.2em;animation:labelAppear .3s var(--ease-spring) .5s both}.showdown-info{text-align:center;max-width:400px;animation:infoFadeIn .4s var(--ease-out) 1.1s both}.showdown-info p{color:var(--text-muted);font-size:1.1rem;font-style:italic;margin-bottom:1.5rem;line-height:1.6}.showdown-info .btn{width:100%}@keyframes slideFromLeft{0%{transform:translate(-100vw);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideFromRight{0%{transform:translate(100vw);opacity:0}to{transform:translate(0);opacity:1}}@keyframes labelAppear{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes infoFadeIn{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.vs-intro-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s var(--ease-out);transition:opacity .5s var(--ease-out)}.vs-intro-overlay.fade-out{opacity:0}.vs-intro-canvas{position:fixed;inset:0;z-index:101;pointer-events:none}.vs-intro-fighters{display:flex;align-items:center;gap:2rem;z-index:102}.vs-intro-fighter{position:relative;width:300px;height:360px;overflow:hidden;border:2px solid var(--purple-muted);background:var(--bg-card)}.vs-intro-fighter.left{animation:vsSlideFromLeft .8s var(--ease-out) both;border-right:none}.vs-intro-fighter.right{animation:vsSlideFromRight .8s var(--ease-out) .5s both;border-left:none}.vs-intro-img{width:100%;height:100%;object-fit:cover;object-position:center 20%;mask-image:linear-gradient(to bottom,black 65%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black 65%,transparent 100%)}.vs-intro-name{position:absolute;bottom:.75rem;left:0;right:0;text-align:center;font-family:var(--font-display);font-size:1.2rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--gold);text-shadow:0 0 20px rgba(var(--gold-rgb),.6),0 2px 10px rgba(0,0,0,.9);animation:labelAppear .4s var(--ease-spring) .9s both}.vs-intro-name.opponent{color:var(--purple-light);text-shadow:0 0 20px rgba(var(--purple-rgb),.6),0 2px 10px rgba(0,0,0,.9);animation-delay:1.4s}.vs-intro-text{font-family:var(--font-display);font-size:6rem;font-weight:900;color:var(--gold-light);letter-spacing:.15em;text-shadow:0 0 40px rgba(var(--gold-rgb),.8),0 0 80px rgba(var(--gold-rgb),.4),0 0 120px rgba(var(--gold-rgb),.2);transform:scale(0);opacity:0;z-index:103}.vs-intro-text.visible{animation:vsTextSlam .5s var(--ease-spring) both}@keyframes vsSlideFromLeft{0%{transform:translate(-120vw) rotate(-2deg);opacity:0}to{transform:translate(0) rotate(0);opacity:1}}@keyframes vsSlideFromRight{0%{transform:translate(120vw) rotate(2deg);opacity:0}to{transform:translate(0) rotate(0);opacity:1}}@keyframes vsTextSlam{0%{transform:scale(0);opacity:0}60%{transform:scale(1.3);opacity:1}80%{transform:scale(.95)}to{transform:scale(1);opacity:1}}.error-text{color:var(--rose);font-size:.9rem;margin-top:.5rem}.disconnect-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:90;animation:fadeIn .3s var(--ease-out)}.disconnect-card{background:linear-gradient(135deg,var(--bg-card),var(--bg-purple));border:2px solid var(--purple-muted);border-left:3px solid var(--gold);padding:2.5rem;text-align:center;max-width:360px;width:90%;animation:scaleIn .4s var(--ease-spring)}.disconnect-card h2{font-family:var(--font-display);font-size:1.1rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--gold);margin-bottom:.75rem}.disconnect-card p{color:var(--text-muted);font-size:1rem;font-style:italic;line-height:1.6}.disconnect-countdown{font-family:var(--font-display);font-size:3rem;font-weight:700;color:var(--gold-light);text-shadow:0 0 25px rgba(var(--gold-rgb),.5);margin:1rem 0}.disconnect-sub{font-size:.85rem;margin-top:.5rem}.spinner{width:32px;height:32px;border:3px solid var(--purple-muted);border-top-color:var(--gold);border-radius:50%;margin:1.5rem auto;animation:spin .8s linear infinite}.character-select-screen{display:flex;flex-direction:column;align-items:center;padding:3rem 1.5rem;max-width:800px;width:100%;animation:fadeInUp .5s var(--ease-out)}.character-select-screen h2{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--gold);text-transform:uppercase;letter-spacing:.15em;margin-bottom:.75rem}.character-select-screen p{color:var(--text-muted);font-size:1.1rem;font-style:italic;margin-bottom:2rem;line-height:1.6}.character-select-grid{display:flex;gap:1.5rem;width:100%;justify-content:center}.character-select-card{flex:1;max-width:220px;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem 1rem;background:linear-gradient(135deg,var(--bg-card),rgba(var(--bg-card-rgb),.6));border:1px solid var(--purple-muted);cursor:pointer;transition:all .3s var(--ease-out);position:relative}.character-select-card:hover:not(:disabled){border-color:var(--gold);transform:translateY(-4px);box-shadow:0 0 25px rgba(var(--gold-rgb),.2)}.character-select-card.taken{opacity:.35;cursor:not-allowed;filter:grayscale(.7)}.character-select-portrait{width:120px;height:120px;object-fit:cover;object-position:top center;border-radius:50%;border:2px solid var(--purple-muted);transition:border-color .3s var(--ease-out)}.character-select-card:hover:not(:disabled) .character-select-portrait{border-color:var(--gold)}.character-select-name{font-family:var(--font-display);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);transition:color .3s var(--ease-out)}.character-select-card:hover:not(:disabled) .character-select-name{color:var(--gold)}.character-taken-label{font-family:var(--font-display);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--rose);position:absolute;bottom:.5rem}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes cellReveal{0%{opacity:0;transform:scale(.6);background:rgba(var(--gold-rgb),.15)}50%{background:rgba(var(--gold-rgb),.08)}to{opacity:1;transform:scale(1);background:var(--bg-purple)}}@keyframes mineExplode{0%{transform:scale(.3);opacity:0;background:var(--gold)}30%{transform:scale(1.3);background:#f64}60%{transform:scale(.9)}to{transform:scale(1);opacity:1;background:var(--rose)}}@keyframes mineShake{0%,to{transform:rotate(0)}20%{transform:rotate(-15deg)}40%{transform:rotate(15deg)}60%{transform:rotate(-10deg)}80%{transform:rotate(10deg)}}@keyframes flagPlant{0%{transform:scale(0) rotate(-45deg);opacity:0}60%{transform:scale(1.2) rotate(5deg)}to{transform:scale(1) rotate(0);opacity:1}}@keyframes cellPending{0%,to{background:rgba(var(--gold-rgb),.1);box-shadow:inset 0 0 8px rgba(var(--gold-rgb),.15)}50%{background:rgba(var(--gold-rgb),.2);box-shadow:inset 0 0 16px rgba(var(--gold-rgb),.35)}}@keyframes cellDenied{0%,to{transform:translate(0);box-shadow:none}15%{transform:translate(-3px);box-shadow:inset 0 0 8px rgba(var(--rose-rgb),.4)}30%{transform:translate(3px)}45%{transform:translate(-2px)}60%{transform:translate(2px)}75%{transform:translate(-1px);box-shadow:inset 0 0 4px rgba(var(--rose-rgb),.2)}}.footer{margin-top:auto;padding:1.5rem;text-align:center;font-size:.85rem;color:var(--text-muted);opacity:.7}.footer a{color:var(--gold-dark);text-decoration:none;transition:color .2s var(--ease-out)}.footer a:hover{color:var(--gold)}@media(max-width:768px){.game-layout{flex-direction:column;align-items:center;padding:1rem;gap:1.5rem}.fighter-banner{height:180px}.board.main{--cell-size: 24px}.vs-intro-fighter{width:180px;height:220px}.vs-intro-text{font-size:3.5rem}.vs-intro-fighters{gap:1rem}}
