@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=Fira+Code:wght@600&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--bg-color:#1b120d;--wood:#5a341e;--wood-dark:#3e2211;--cream:#f8e3c5;--cream-dark:#e8d0ae;--neon-orange:#ff9d00;--neon-green:#7ea04d;--neon-red:#d85a4f;--shadow-dark:#0009;--shadow-light:#ffffff1a}body{background-color:var(--bg-color);color:var(--cream);font-family:Outfit,sans-serif;overflow-x:hidden}.clay-card{background:var(--cream);box-shadow:8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);border-radius:28px}.header{text-align:center;flex-direction:column;align-items:center;gap:10px;display:flex}.logo-wrapper{justify-content:center;align-items:center;gap:15px;display:flex}.logo-icon{filter:drop-shadow(0 8px 12px #0006);width:75px;height:auto}.logo-text{background:linear-gradient(#fff5cc,#f90);-webkit-text-fill-color:transparent;filter:drop-shadow(0 6px #994d00)drop-shadow(0 12px 15px #00000080);letter-spacing:2px;-webkit-background-clip:text;margin:0;font-size:65px;font-weight:900;line-height:1}.header-pill{background:linear-gradient(#fde4bf,#e6c190);border-radius:50px;justify-content:center;align-items:center;gap:15px;width:fit-content;margin-top:10px;margin-left:auto;margin-right:auto;padding:12px 45px;font-size:1.8rem;font-weight:900;display:flex;position:relative;box-shadow:0 8px #b38854,0 15px 25px #00000080,inset 0 6px 12px #fffc}.header-pill:before{content:"";pointer-events:none;border:2px dashed #8a572b66;border-radius:45px;position:absolute;inset:5px}.code-text{color:#6c8e3e}.bug-text{color:#c34a36}.vs{color:#814c25;font-size:1.4rem}@media (width<=768px){.logo{font-size:50px}.subtitle-text{font-size:1.4rem}}.player-card{background:var(--theme-board-inner);border:8px solid var(--theme-border);opacity:.8;border-radius:35px;flex-direction:column;align-items:center;width:220px;padding:35px 20px 20px;transition:all .3s;display:flex;position:relative;transform:scale(.95);box-shadow:inset 0 4px 10px #fff9,inset 0 -4px 10px #0000001a,0 15px 30px #0006}.player-card.active{opacity:1;border-color:var(--theme-accent);box-shadow:inset 0 4px 10px #fff9, 0 15px 30px #00000080, 0 0 25px var(--theme-accent-glow);transform:scale(1.05)}.player-card.active.player2{border-color:var(--theme-accent);box-shadow:inset 0 4px 10px #fff9, 0 15px 30px #00000080, 0 0 25px var(--theme-accent-glow)}.player-badge{background:var(--theme-accent);color:#fff;border:4px solid var(--theme-border);border-radius:25px;padding:8px 25px;font-size:1.1rem;font-weight:900;transition:all .3s;position:absolute;top:-22px;box-shadow:0 8px 15px #0000004d,inset 0 3px 5px #fff6}.avatar-frame{background:var(--theme-board-cell);border:4px solid var(--theme-border);border-radius:50%;justify-content:center;align-items:center;width:100px;height:100px;margin-top:5px;margin-bottom:15px;transition:all .3s;display:flex;box-shadow:inset 0 5px 15px #0003,0 5px 10px #fff9}.avatar{filter:drop-shadow(0 8px 10px #0000004d);width:75px;height:75px}.avatar img{object-fit:contain;width:100%;height:100%}.name-plate{text-align:center;background:#2b2b2b;border-radius:15px;width:90%;margin-bottom:15px;padding:8px 25px;box-shadow:inset 0 3px 5px #00000080,0 2px 5px #ffffff80}.name-plate h3{color:var(--theme-accent);margin:0;font-size:1.2rem;font-weight:800;line-height:1.2;transition:color .3s}.name-plate .subtitle{color:#a0a0a0;font-size:.8rem;font-weight:600}.score-box{background:var(--theme-board-cell);border:2px dashed var(--theme-border);text-align:center;border-radius:20px;flex-direction:column;width:90%;padding:10px 20px;transition:all .3s;display:flex;box-shadow:inset 0 3px 10px #0000001a}.score-box span:first-child{color:var(--theme-border);text-transform:uppercase;font-size:.8rem;font-weight:800;transition:color .3s}.score{color:var(--theme-accent);margin-top:-5px;font-family:Fira Code,monospace;font-size:2.8rem;font-weight:900;transition:color .3s}@media (width<=768px){.player-card{width:170px;padding:15px}.avatar-frame{width:90px;height:90px}.avatar{width:70px;height:70px}.score{font-size:2rem}}.turn-container{z-index:20;justify-content:center;display:flex;position:absolute;top:-20px;left:50%;transform:translate(-50%)}.turn{color:#8ec354;white-space:nowrap;background:#4a3018;border:4px solid #6b4324;border-radius:25px;align-items:center;gap:10px;padding:8px 30px;font-size:1.2rem;font-weight:900;display:flex;box-shadow:0 10px 20px #0006,inset 0 2px 5px #fff3}.turn-icon{font-size:1.2rem}.bug-turn{color:#ff6b6b}.board-dashboard-casing{background:var(--theme-board-outer);border:3px solid var(--theme-border);border-radius:40px;flex-direction:column;justify-content:center;align-items:center;padding:25px 15px 20px;transition:background .3s,border-color .3s;display:flex;position:relative;box-shadow:inset 0 8px 15px #fff3,inset 0 -10px 20px #0006,0 25px 50px #0009}.board{background:0 0;grid-template-columns:repeat(3,1fr);gap:15px;padding:10px;display:grid;position:relative}.cell{background:var(--theme-board-cell);cursor:pointer;border:none;border-radius:20px;outline:none;justify-content:center;align-items:center;width:100px;height:100px;transition:all .15s;display:flex;box-shadow:inset 0 4px 8px #fffc,inset 0 -4px 8px #00000026,0 8px 15px #00000040}.cell:hover{transform:translateY(-2px);box-shadow:inset 0 6px 10px #ffffffe6,inset 0 -4px 8px #00000026,0 12px 20px #0000004d}.cell:active{transform:scale(.96);box-shadow:inset 0 2px 4px #fff6,inset 0 -2px 4px #0000001a,0 4px 8px #0003}.piece-img{object-fit:contain;filter:drop-shadow(0 10px 15px #0006);width:80%;height:80%}@media (width<=768px){.cell{width:80px;height:80px}.board{gap:10px;padding:5px}}.controls{z-index:10;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;top:-80px;left:50%;transform:translate(-50%)}.controls-single-row{align-items:stretch;gap:10px;top:-45px;flex-direction:row!important}.controls-row{justify-content:center;align-items:center;gap:12px;display:flex}.controls-settings-row{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#00000040;border:1px solid #ffffff14;border-radius:40px;justify-content:center;align-items:center;gap:8px;padding:5px 10px;display:flex}.btn{cursor:pointer;white-space:nowrap;border:none;border-radius:40px;justify-content:center;align-items:center;gap:8px;padding:11px 22px;font-family:inherit;font-size:1.05rem;font-weight:800;transition:transform .1s,box-shadow .1s;display:flex;position:relative}.btn-green{color:#fff;text-shadow:0 2px 2px #0000004d;background:linear-gradient(#7da545,#5b7e2c);box-shadow:0 7px #3a5417,0 12px 18px #00000080,inset 0 5px 10px #fff6}.btn-green:before{content:"";pointer-events:none;border:2px dashed #ffffff80;border-radius:35px;position:absolute;inset:5px}.btn-orange{color:#4a280b;background:linear-gradient(#efa85c,#d98835);box-shadow:0 7px #9c541b,0 12px 18px #00000080,inset 0 5px 10px #ffffff80}.btn-orange:before{content:"";pointer-events:none;border:2px dashed #4a280b4d;border-radius:35px;position:absolute;inset:5px}.btn:active{transform:translateY(5px)}.btn-green:active{box-shadow:0 2px #3a5417,0 5px 10px #00000080,inset 0 3px 8px #0003}.btn-orange:active{box-shadow:0 2px #9c541b,0 5px 10px #00000080,inset 0 3px 8px #0003}.settings-pill{white-space:nowrap;border:none;border-radius:40px;justify-content:center;align-items:center;gap:8px;padding:10px 18px;display:flex;position:relative}.settings-pill:before{content:"";pointer-events:none;border:2px dashed #0000002e;border-radius:36px;position:absolute;inset:4px}.match-pill{background:linear-gradient(#7da545,#5b7e2c);box-shadow:0 6px #3a5417,0 12px 18px #00000080,inset 0 4px 8px #ffffff59}.match-pill:before{border-color:#ffffff73!important}.match-pill .pill-label{color:#4a280b;text-shadow:none;font-size:1.1rem}.starts-pill{background:linear-gradient(#6c8ff8,#4a6fe0);box-shadow:0 6px #2c4aab,0 12px 18px #00000080,inset 0 4px 8px #ffffff59}.starts-pill:before{border-color:#ffffff59!important}.starts-pill .pill-label{color:#4a280b;text-shadow:none;font-size:1.1rem}.starts-pill .pill-btn{color:#4a280b;background:#0000001a}.starts-pill .pill-btn:hover{color:#2a1200;background:#0003}.starts-pill-green{background:linear-gradient(#7da545,#5b7e2c)!important;box-shadow:0 6px #3a5417,0 12px 18px #00000080,inset 0 4px 8px #ffffff59!important}.starts-pill-green:before{border-color:#ffffff73!important}.starts-pill-green .pill-label{text-shadow:0 1px 3px #0006;color:#fff!important}.starts-pill-green .pill-btn{color:#ffffffb3;background:#ffffff26}.starts-pill-green .pill-btn:hover{color:#fff;background:#ffffff47}.pill-label{white-space:nowrap;letter-spacing:.02em;font-size:1.1rem;font-weight:900}.pill-btn{cursor:pointer;color:#0000008c;white-space:nowrap;background:#0000001a;border:2px solid #0000;border-radius:25px;padding:7px 18px;font-family:inherit;font-size:1.05rem;font-weight:800;transition:all .18s}.match-pill .pill-btn{color:#ffffffa6;background:#ffffff1f}.pill-btn:hover{color:#000;background:#0000002e}.match-pill .pill-btn:hover{color:#fff;background:#ffffff38}.pill-btn.active-match{color:#2c3e8a;background:linear-gradient(#fff,#e8edff);border-color:#fff9;box-shadow:inset 0 2px 4px #0000001a}.pill-btn.active-dev{color:#fff;text-shadow:0 1px 3px #0006;background:linear-gradient(#7dc44a,#4d8a1f);border-color:#fff6;box-shadow:inset 0 2px 5px #ffffff4d}.pill-btn.active-bug{color:#fff;text-shadow:0 1px 3px #0006;background:linear-gradient(#ff7675,#d63031);border-color:#fff6;box-shadow:inset 0 2px 5px #ffffff4d}@media (width<=950px){.controls{margin:0!important;position:static!important;left:auto!important;transform:none!important}.controls-single-row{align-items:center;gap:12px;width:auto;top:0;flex-direction:column!important}.starts-pill,.match-pill{width:auto}}.footer{z-index:10;justify-content:center;width:100%;margin-top:auto;padding:5px 0 10px;display:flex}.footer-card{text-align:center;z-index:5;background:linear-gradient(#fde4bf,#e6c190);border-radius:20px;width:820px;padding:15px 40px;position:absolute;bottom:-35px;left:50%;transform:translate(-50%);box-shadow:0 8px #b38854,0 20px 30px #0009,inset 0 6px 12px #fffc}.footer-card:before{content:"";pointer-events:none;border:2px dashed #8a572b66;border-radius:14px;position:absolute;inset:6px}.footer-card p{color:#5a341e;text-shadow:0 1px 1px #ffffff80;margin:0;font-size:1.2rem;font-weight:800;line-height:1.4}.quote-card{background:var(--cream);border:3px solid var(--wood);border-radius:30px;padding:10px 25px}.quote-card p{color:var(--wood-dark);text-align:center;margin:0;font-size:1.1rem;font-weight:800}@media (width<=950px){.footer-card{width:100%;margin-top:20px;position:relative;left:auto;transform:none}}.theme-selector-container{z-index:100;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#00000080;border:2px solid #fff3;border-radius:20px;flex-direction:column;align-items:center;gap:8px;padding:10px 15px;display:flex;position:absolute;top:20px;right:20px}.theme-title{color:#fff;text-transform:uppercase;letter-spacing:1px;font-size:.9rem;font-weight:800}.theme-options{gap:10px;display:flex}.theme-circle{cursor:pointer;border:3px solid #0000;border-radius:50%;width:25px;height:25px;transition:all .2s;box-shadow:0 4px 6px #0006,inset 0 2px 4px #fff6}.theme-circle:hover{transform:scale(1.1)}.theme-circle.active{border-color:#fff;transform:scale(1.2);box-shadow:0 0 15px #ffffff80}:root,[data-theme=orange]{--theme-board-outer:#814c25;--theme-board-inner:#c39160;--theme-board-cell:#f3d4a4;--theme-border:#5a341e;--theme-accent:#ff9d00;--theme-accent-glow:#ff9d0099}[data-theme=green]{--theme-board-outer:#4a752c;--theme-board-inner:#7ba356;--theme-board-cell:#d5e6c5;--theme-border:#32521c;--theme-accent:#7ea04d;--theme-accent-glow:#7ea04d99}[data-theme=bule]{--theme-board-outer:#37648f;--theme-board-inner:#6798c9;--theme-board-cell:#d6e8fa;--theme-border:#234463;--theme-accent:#3498db;--theme-accent-glow:#3498db99}[data-theme=purpal]{--theme-board-outer:#6a347d;--theme-board-inner:#9c60b0;--theme-board-cell:#e9d6f0;--theme-border:#4d235c;--theme-accent:#9b59b6;--theme-accent-glow:#9b59b699}.app-container{background-color:#1a1a1a;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:relative;overflow:hidden}@media (width<=950px){.app-container{justify-content:flex-start;padding:20px;overflow:auto}}.app-container:before{content:"";filter:blur(4px)brightness(.9);z-index:0;background-image:url(/image-copy-3.png);background-position:50%;background-repeat:no-repeat;background-size:100%;width:calc(100% + 20px);height:calc(100% + 20px);position:absolute;top:-10px;left:-10px}@media (width<=950px){.app-container:before{background-image:url(/mobile-bg.png);background-position:50%;background-size:cover;top:-10px}}.game-content{z-index:10;flex-direction:column;justify-content:center;align-items:center;gap:10px;width:100%;height:100%;display:flex;position:relative}@media (height<=900px){.game-content{transform:scale(.95)}}@media (height<=800px){.game-content{transform:scale(.9)}}@media (height<=700px){.game-content{transform:scale(.8)}}@media (height<=600px){.game-content{transform:scale(.7)}}.game-layout{justify-content:center;align-items:center;gap:15px;width:100%;display:flex}.center-column{flex-direction:column;align-items:center;gap:15px;display:flex}.bottom-plank{background:linear-gradient(#9d5d2d,#5e310d);border:1px solid #5a2e0e;border-radius:20px;flex-direction:column;align-items:center;width:850px;height:85px;margin-top:35px;display:flex;position:relative;box-shadow:inset 0 4px 6px #ffffff40,inset 0 -8px 12px #000000b3,0 15px 20px #0009}.bottom-plank:before{content:"🌿";z-index:20;filter:drop-shadow(3px 8px 5px #0009);font-size:55px;position:absolute;bottom:-25px;left:0;transform:rotate(-15deg)}.bottom-plank:after{content:"🌿";z-index:20;filter:drop-shadow(3px 8px 5px #0009);font-size:55px;position:absolute;bottom:-25px;right:0;transform:scaleX(-1)rotate(-15deg)}@media (width<=950px){.game-layout{zoom:.75;-moz-transform-origin:top;grid-template-columns:1fr auto 1fr;grid-template-areas:"header header header""board board board""p1 controls p2""footer footer footer";place-items:center;gap:15px;width:100%;display:grid;-moz-transform:scale(.75)}.center-column,.bottom-plank{display:contents}.header{grid-area:header;margin-bottom:20px}.board-wrapper{grid-area:board}.player1{grid-area:p1;justify-self:end}.player2{grid-area:p2;justify-self:start}.controls{grid-area:controls}.footer-card{grid-area:footer}.bottom-plank:before,.bottom-plank:after{display:none}}@media (width<=650px){.game-layout{zoom:.52;-moz-transform:scale(.52)}}@media (width<=480px){.game-layout{zoom:.45;-moz-transform:scale(.45)}}.match-winner-overlay{z-index:200;justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow:hidden}.match-winner-overlay:before{content:"";filter:blur(3px)brightness(.55);z-index:0;background:url(/match-bg.png) 50%/cover no-repeat;position:absolute;inset:0;transform:scale(1.05)}.match-winner-card{z-index:1;text-align:center;flex-direction:column;align-items:center;gap:16px;display:flex;position:relative}.match-winner-img{filter:drop-shadow(0 10px 40px #ffc85080);width:380px;max-width:90vw;animation:.6s cubic-bezier(.34,1.56,.64,1) winner-bounce}@keyframes winner-bounce{0%{opacity:0;transform:scale(.3)rotate(-8deg)}60%{opacity:1;transform:scale(1.08)rotate(2deg)}to{opacity:1;transform:scale(1)rotate(0)}}.match-winner-score{color:#fff;background:#ffffff1a;border:2px solid #fff3;border-radius:30px;margin:0;padding:8px 24px;font-size:1.3rem;font-weight:800}.match-target-selector{background:linear-gradient(#ffd93d,#f4a624)!important;box-shadow:0 8px #b87012,0 15px 20px #00000080,inset 0 5px 10px #fff6!important}