@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap";:root{--bg-color:#fafaf9;--text-color:#0f172a;--panel-bg:#fafaf9b3;--border-color:#00000014;--accent-color:#3b82f6;--accent-hover:#2563eb;--accent-glow:#3b82f64d;--shadow:0 10px 30px -5px #00000014, 0 4px 10px -2px #0000000a;--font-family:"Outfit", system-ui, sans-serif;--board-bg:#e2e8f0;--tile-bg:#fafaf9e6;--tile-border:#cbd5e1;--tile-shadow:inset 0 2px 4px #0000000d}body{font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-color);-webkit-font-smoothing:antialiased;background-image:radial-gradient(circle at 15%,#3b82f614,#0000 25%),radial-gradient(circle at 85% 30%,#ec489914,#0000 25%);margin:0;padding:0;line-height:1.6}#root{flex-direction:column;min-height:100vh;display:flex}.panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-color);box-shadow:var(--shadow);border-radius:24px;padding:32px}h1,h2,h3{letter-spacing:-.02em;margin-top:0;font-weight:800}h1{background:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 50%,#ec4899 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 4px #0000001a);-webkit-background-clip:text;margin-bottom:.5rem;font-size:3.5rem}h2{color:#1e293b;margin-bottom:1.5rem;font-size:1.6rem}h3{color:#334155;border-bottom:1px solid var(--border-color);margin-bottom:1rem;padding-bottom:8px;font-size:1.2rem}.btn{font-size:1.1rem;font-weight:600;font-family:var(--font-family);background:linear-gradient(180deg, var(--accent-color) 0%, var(--accent-hover) 100%);color:#fff;cursor:pointer;box-shadow:0 4px 12px var(--accent-glow);border:1px solid #fffc;border-radius:12px;justify-content:center;align-items:center;padding:.8rem 1.8rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn:hover{box-shadow:0 8px 20px var(--accent-glow);filter:brightness(1.05);transform:translateY(-2px)scale(1.02)}.btn:active{transform:translateY(1px)}.btn:disabled{color:#64748b;box-shadow:none;cursor:not-allowed;background:#cbd5e1;border-color:#0000;transform:none}input[type=text]{width:100%;font-size:1.1rem;font-family:var(--font-family);border:1px solid var(--border-color);color:var(--text-color);box-sizing:border-box;background:#ffffffe6;border-radius:12px;padding:1rem 1.2rem;transition:all .3s}input[type=text]:focus{border-color:var(--accent-color);background:#fff;outline:none;box-shadow:0 0 0 4px #3b82f626}.lobby-container{text-align:center;max-width:500px;margin:100px auto;animation:.6s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.form-group{text-align:left;margin-bottom:1.5rem}.game-layout{box-sizing:border-box;flex-direction:column;gap:12px;width:100%;min-height:100vh;margin:0 auto;padding:12px;animation:.8s ease-out fadeIn;display:flex}.game-main-content{box-sizing:border-box;flex:1;gap:12px;width:100%;min-height:0;display:flex}.left-sidebar{background:var(--panel-bg);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-color);min-width:200px;box-shadow:var(--shadow);border-radius:20px;flex-direction:column;flex:2;gap:12px;padding:16px;display:flex;overflow-y:auto}.right-sidebar{background:var(--panel-bg);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-color);min-width:250px;box-shadow:var(--shadow);border-radius:20px;flex-direction:column;flex:2;gap:12px;padding:16px;display:flex;overflow-y:auto}.board-container{box-shadow:none;background:0 0;border:none;flex:5;justify-content:center;align-items:center;min-width:0;min-height:0;padding:0;display:flex;position:relative;container-type:size}.monopoly-board{aspect-ratio:1;background:#cbd5e1;border:2px solid #94a3b8;border-radius:12px;grid-template-rows:1.5fr repeat(9,1fr) 1.5fr;grid-template-columns:1.5fr repeat(9,1fr) 1.5fr;gap:2px;width:100%;max-width:100cqmin;height:100%;max-height:100cqmin;display:grid;position:relative;box-shadow:0 16px 40px #0000001a}.tile{background:var(--tile-bg);text-align:center;box-shadow:var(--tile-shadow);flex-direction:column;justify-content:flex-start;align-items:center;padding:max(2px,.5cqmin);font-size:max(8px,1.2cqmin);font-weight:600;transition:background .2s;display:flex;position:relative;overflow:visible}.tile:hover{background:#f1f5f9}.tile-color-bar{position:absolute;box-shadow:0 1px 3px #0000001a}.top-bar{border-bottom:1px solid #0003;height:20%;top:0;left:0;right:0}.right-bar{border-left:1px solid #0003;width:20%;top:0;bottom:0;right:0}.bottom-bar{border-top:1px solid #0003;height:20%;bottom:0;left:0;right:0}.left-bar{border-right:1px solid #0003;width:20%;top:0;bottom:0;left:0}.corner-tile{text-transform:uppercase;background:#f8fafc;justify-content:center;font-size:max(10px,1.5cqmin);font-weight:800}.tile-content{flex-direction:column;justify-content:space-between;align-items:center;width:100%;height:100%;display:flex}.bottom-edge .tile-content{padding-top:25%}.left-edge .tile-content{justify-content:center;padding-right:25%}.top-edge .tile-content{justify-content:center;padding-bottom:25%}.right-edge .tile-content{justify-content:center;padding-left:25%}.tile-name{word-wrap:break-word;color:#000;padding:2px;line-height:1.1}.tile-price{color:#64748b;font-family:JetBrains Mono,monospace;font-size:max(8px,1.1cqmin);font-weight:700}.tokens-container{z-index:10;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;padding:0 4px;display:flex;position:absolute;bottom:4px;left:0;right:0}@keyframes tokenLiftOff{0%{transform:translateY(0)scale(1)}to{transform:translateY(-10px)scale(.95)}}@keyframes tokenParabolicHop{0%{transform:translateY(0)scale(1)}50%{transform:translateY(-22px)scale(.9,1.1)}to{transform:translateY(0)scale(1.05,.95)}}@keyframes tokenSettle{0%{transform:translateY(0)scale(1)}40%{transform:translateY(-6px)scale(.95,1.06)}75%{transform:translateY(1px)scale(1.04,.96)}to{transform:translateY(0)scale(1)}}@keyframes tileLandRipple{0%{box-shadow:inset 0 0 #3b82f699,0 0 #3b82f666}50%{box-shadow:inset 0 0 12px 2px #3b82f666,0 0 16px 4px #3b82f64d}to{box-shadow:inset 0 0 #3b82f600,0 0 #3b82f600}}@keyframes propertyPopupEnter{0%{opacity:0;transform:scale(.92)translateY(8px)}to{opacity:1;transform:scale(1)translateY(0)}}.token-lift-off{animation:80ms ease-out forwards tokenLiftOff}.token-hopping{animation:.2s cubic-bezier(.25,.46,.45,.94) tokenParabolicHop}.token-settling{animation:.16s ease-out forwards tokenSettle}.tile-land-ripple-active{animation:.35s ease-out forwards tileLandRipple}.property-popup-anim{animation:.25s cubic-bezier(.175,.885,.32,1.275) forwards propertyPopupEnter}.player-token{background-color:#ffffffe6;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:max(16px,3cqmin);height:max(16px,3cqmin);font-size:max(10px,1.5cqmin);transition:all .4s cubic-bezier(.34,1.56,.64,1);display:flex;box-shadow:0 2px 4px #0000004d}.ownership-badge{background-color:#fffffff2;border:1px solid #cbd5e1;border-radius:50%;justify-content:center;align-items:center;width:max(14px,2.5cqmin);height:max(14px,2.5cqmin);font-size:max(8px,1.2cqmin);display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 5px #00000080}.player-item{border:1px solid var(--border-color);background:#fff;border-radius:6px;justify-content:space-between;align-items:center;margin-bottom:4px;padding:6px 10px;transition:all .2s;display:flex;box-shadow:0 1px 3px #00000005}.player-item:hover{transform:translate(4px);box-shadow:0 4px 8px #0000000d}.player-item.active{border-left:4px solid var(--accent-color);background:#eff6ff;border-top:1px solid #bfdbfe;border-bottom:1px solid #bfdbfe;border-right:1px solid #bfdbfe}.player-item .name{font-size:.85rem;font-weight:600}.player-item .balance{color:#10b981;font-family:JetBrains Mono,monospace;font-size:.9rem;font-weight:700}.log-entry{border-bottom:1px solid var(--border-color);color:#475569;padding:10px 12px;font-size:.9rem}.log-entry:last-child{border-bottom:none}.log-timestamp{color:#94a3b8;margin-bottom:2px;font-family:JetBrains Mono,monospace;font-size:.75rem;display:block}.controls-grid{grid-template-columns:1fr 1fr;gap:16px;margin-top:auto;display:grid}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#00000005;border-radius:4px}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}.dice-box-canvas{display:block;width:100%!important;height:100%!important}.board-center{z-index:5;pointer-events:none;grid-area:2/2/11/11;grid-template-rows:6fr 3fr;display:grid;position:relative}.board-center-top{flex-direction:column;grid-row:1;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.board-center-bottom{box-sizing:border-box;flex-direction:column;grid-row:2;align-items:center;width:100%;height:100%;min-height:0;padding-bottom:max(48px,10cqmin);display:flex;position:relative;overflow-y:auto}.center-controls{pointer-events:auto;flex-direction:row;justify-content:center;align-items:center;gap:20px;display:flex}.center-controls-grid{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.center-log{pointer-events:auto;flex-direction:column;align-items:center;gap:2px;width:100%;max-width:450px;margin-top:auto;display:flex}.center-log-entry{color:#1e293b;text-align:center;word-wrap:break-word;max-width:90%;font-size:max(10px,1.4cqmin);transition:opacity .3s}.panel-section{background:#fff6;border:1px solid #ffffff80;border-radius:16px;flex-direction:column;padding:16px;display:flex}.panel-section h3{border-bottom:none;margin-bottom:12px;font-size:1.1rem}.empty-state{text-align:center;color:#64748b;background:#00000005;border-radius:12px;flex:1;justify-content:center;align-items:center;padding:24px 16px;font-size:.95rem;display:flex}.debug-panel{color:#d4d4d4;z-index:1000;background:#1e1e1e;border:1px solid #333;border-radius:12px;flex-direction:column;width:350px;height:calc(100vh - 100px);font-family:JetBrains Mono,monospace;display:flex;position:fixed;top:60px;left:20px;overflow:hidden;box-shadow:0 10px 30px #00000080}.debug-header{background:#2d2d2d;border-bottom:1px solid #444;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.debug-header h3{color:#fff;border:none;margin:0;font-size:1rem}.debug-header button{color:#aaa;cursor:pointer;background:0 0;border:none;font-size:1.2rem}.debug-header button:hover{color:#fff}.debug-section{border-bottom:1px solid #333;padding:16px}.debug-section h4{color:#9cdcfe;margin-top:0;margin-bottom:12px;font-size:.9rem}.json-viewer{background:#1e1e1e;border:1px solid #333;border-radius:4px;flex:1;overflow:auto}.json-viewer pre{white-space:pre-wrap;word-wrap:break-word;color:#ce9178;margin:0;padding:12px;font-size:.8rem}.dice-flight-overlay{z-index:1000;pointer-events:none;opacity:1;transition:transform .8s cubic-bezier(.16,1,.3,1);position:absolute;top:33%;left:50%;transform:translate(-50%,-50%)scale(1)}.dice-flight-overlay.animating{transform:translate(calc(-50% + var(--target-x)), calc(-50% + var(--target-y))) scale(.33);opacity:1}.dice-flight-wrapper{filter:drop-shadow(0 10px 20px #00000059);gap:16px;transition:gap .8s cubic-bezier(.16,1,.3,1),filter .8s cubic-bezier(.16,1,.3,1);display:flex}.dice-flight-overlay.animating .dice-flight-wrapper{filter:drop-shadow(0 2px 4px #0003);gap:12px}#dice-box{pointer-events:none;z-index:250;transform-origin:50%;border-radius:16px;width:100%;height:100%;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .3s;position:absolute;top:0%;left:0%;overflow:visible!important}#dice-box.animating-flight{transform:translate(var(--target-x), var(--target-y)) scale(.22);opacity:.95}#dice-box canvas{pointer-events:none!important;width:100%!important;height:100%!important;position:absolute!important;top:0!important;left:0!important}@keyframes dice3dTumble{0%{filter:blur(3px);transform:perspective(600px)rotateX(0)rotateY(0)rotate(0)scale(.5)}25%{filter:blur(1.5px);transform:perspective(600px)rotateX(360deg)rotateY(180deg)rotate(90deg)scale(1.25)}65%{filter:blur();transform:perspective(600px)rotateX(720deg)rotateY(540deg)rotate(270deg)scale(1.1)}to{filter:blur();transform:perspective(600px)rotateX(1080deg)rotateY(720deg)rotate(360deg)scale(1)}}.dice-3d-tumbler{transform-style:preserve-3d;animation:1.4s cubic-bezier(.2,.9,.3,1) forwards dice3dTumble}@keyframes cardFlipIn{0%{opacity:0;transform:perspective(800px)translateY(50px)rotateY(90deg)scale(.6)}60%{opacity:1;transform:perspective(800px)translateY(-10px)rotateY(-10deg)scale(1.05)}to{opacity:1;transform:perspective(800px)translateY(0)rotateY(0)scale(1)}}@keyframes cardGlowPulse{0%,to{box-shadow:0 10px 30px -5px var(--glow-color,#f9731680), 0 0 15px var(--glow-color,#f973164d)}50%{box-shadow:0 15px 45px 0px var(--glow-color,#f97316cc), 0 0 25px var(--glow-color,#f9731699)}}.effect-card-container{transform-style:preserve-3d;backface-visibility:hidden;animation:.6s cubic-bezier(.175,.885,.32,1.275) forwards cardFlipIn,2.5s ease-in-out infinite alternate cardGlowPulse}@keyframes diceSpin{0%{filter:drop-shadow(0 0 10px #38bdf880);transform:rotate(0)scale(.85)}50%{filter:drop-shadow(0 0 20px #f59e0bcc);transform:rotate(180deg)scale(1.25)}to{filter:drop-shadow(0 0 10px #38bdf880);transform:rotate(360deg)scale(.85)}}.dice-spin-anim{animation:.4s linear infinite diceSpin;display:inline-block}.counter{color:var(--accent);background:var(--accent-bg);border:2px solid #0000;border-radius:5px;margin-bottom:24px;padding:5px 10px;font-size:16px;transition:border-color .3s}.counter:hover{border-color:var(--accent-border)}.counter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hero{position:relative}.hero .base,.hero .framework,.hero .vite{margin:0 auto;inset-inline:0}.hero .base{z-index:0;width:170px;position:relative}.hero .framework,.hero .vite{position:absolute}.hero .framework{z-index:1;height:28px;top:34px;transform:perspective(2000px)rotate(300deg)rotateX(44deg)rotateY(39deg)scale(1.4)}.hero .vite{z-index:0;width:auto;height:26px;top:107px;transform:perspective(2000px)rotate(300deg)rotateX(40deg)rotateY(39deg)scale(.8)}#center{flex-direction:column;flex-grow:1;place-content:center;place-items:center;gap:25px;display:flex}@media (width<=1024px){#center{gap:18px;padding:32px 20px 24px}}#next-steps{border-top:1px solid var(--border);text-align:left;display:flex}#next-steps>div{flex:1 1 0;padding:32px}@media (width<=1024px){#next-steps>div{padding:24px 20px}}#next-steps .icon{width:22px;height:22px;margin-bottom:16px}@media (width<=1024px){#next-steps{text-align:center;flex-direction:column}}#docs{border-right:1px solid var(--border)}@media (width<=1024px){#docs{border-right:none;border-bottom:1px solid var(--border)}}#next-steps ul{gap:8px;margin:32px 0 0;padding:0;list-style:none;display:flex}#next-steps ul .logo{height:18px}#next-steps ul a{color:var(--text-h);background:var(--social-bg);border-radius:6px;align-items:center;gap:8px;padding:6px 12px;font-size:16px;text-decoration:none;transition:box-shadow .3s;display:flex}#next-steps ul a:hover{box-shadow:var(--shadow)}#next-steps ul a .button-icon{width:18px;height:18px}@media (width<=1024px){#next-steps ul{flex-wrap:wrap;justify-content:center;margin-top:20px}#next-steps ul li{flex:calc(50% - 8px)}#next-steps ul a{box-sizing:border-box;justify-content:center;width:100%}}#spacer{border-top:1px solid var(--border);height:88px}@media (width<=1024px){#spacer{height:48px}}.ticks{width:100%;position:relative}.ticks:before,.ticks:after{content:"";border:5px solid #0000;position:absolute;top:-4.5px}.ticks:before{border-left-color:var(--border);left:0}.ticks:after{border-right-color:var(--border);right:0}