:root{color:#f5efd1;background:#171322;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}html,body,#root{height:100%}button,input{font:inherit}button{border:0;border-radius:8px;color:#fff6d6;background:#28796d;padding:.65rem .85rem;font-weight:800;cursor:pointer;box-shadow:0 8px 18px #2a4c2d2e}button:hover{background:#1f6259}button:disabled{cursor:wait;opacity:.78}button.secondary{color:#f5efd1;background:#3a3144;box-shadow:none}input{width:100%;border:2px solid #746249;border-radius:8px;background:#211a2a;color:#f5efd1;padding:.8rem .9rem;margin-top:.45rem}.shell{min-height:100vh;display:grid;place-items:center;padding:1rem;background:linear-gradient(150deg,#171322,#2b2130 46%,#3d3025)}.landing-shell{--landing-background-image: none;position:relative;grid-template-rows:minmax(9.5rem,32vh) auto minmax(1rem,1fr);align-items:start;justify-items:center;overflow:hidden;padding:clamp(1.5rem,4vh,2.75rem) clamp(1rem,3vh,2rem) clamp(1rem,3vh,2rem);background:linear-gradient(180deg,#0704121a,#0704129e),var(--landing-background-image) center / cover no-repeat,#100b1b}.landing-shell:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 30%,rgb(102 235 219 / .16),transparent 24rem),radial-gradient(circle at 20% 75%,rgb(126 71 255 / .2),transparent 18rem),radial-gradient(circle at 82% 78%,rgb(238 140 56 / .2),transparent 18rem);pointer-events:none}.landing-shell:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgb(4 2 10 / .42),transparent 18%,transparent 82%,rgb(4 2 10 / .42)),linear-gradient(180deg,rgb(4 2 10 / .2),transparent 34%,rgb(4 2 10 / .62));pointer-events:none}.landing-logo{position:relative;z-index:1;align-self:end;width:min(61rem,88vw);height:clamp(10rem,36vh,22rem);object-fit:cover;object-position:center 35%;filter:drop-shadow(0 1rem 2.2rem rgb(0 0 0 / .55)) drop-shadow(0 0 1.1rem rgb(255 190 78 / .22))}.join-panel{position:relative;z-index:1;grid-row:2;display:grid;justify-items:stretch;width:min(46rem,100%);border:2px solid rgb(84 231 216 / .78);border-radius:8px;background:linear-gradient(145deg,#12142bdb,#150e20e0),#141023e6;padding:clamp(1rem,2.8vw,2.1rem) clamp(1.25rem,4vw,3rem) clamp(1rem,2.8vw,1.6rem);box-shadow:0 24px 70px #04020c8f,0 0 36px #41dece2e,inset 0 0 0 1px #ffffff12;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.eyebrow{margin:0 0 .35rem;color:#7fdcca;font-size:.78rem;font-weight:900;letter-spacing:0;text-transform:uppercase}.landing-alpha{justify-self:center;display:inline-flex;align-items:center;gap:.45rem;min-height:2.15rem;margin-bottom:1rem;border:2px solid rgb(84 231 216 / .62);border-radius:8px;background:#156f663d;color:#62ead7;padding:.25rem .85rem;font-size:1rem;box-shadow:0 0 18px #54e7d86b,inset 0 0 18px #54e7d81f}.landing-alpha:before,.landing-alpha:after{content:"";width:.42rem;height:.42rem;border-radius:2px;background:#62ead7;transform:rotate(45deg);box-shadow:0 0 10px #62ead7b3}h1,h2,p{margin-top:0}h1{margin-bottom:.75rem;font-size:2.4rem;line-height:1}.join-panel h1{color:#fff0c7;font-family:Georgia,Times New Roman,serif;font-size:clamp(3rem,6vw,4.7rem);text-align:center;text-shadow:0 3px 0 rgb(59 37 26 / .52),0 12px 24px rgb(0 0 0 / .34)}h2{font-size:1rem}.intro{justify-self:center;max-width:34rem;color:#e1c58b;font-size:clamp(1rem,2vw,1.35rem);line-height:1.5;text-align:center}label{display:block;color:#f0e6bf;font-weight:800}.join-panel label{margin-top:1.6rem;color:#f8ddb0;font-size:1rem}.join-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.75rem,3vw,1.5rem);margin-top:1.9rem}.join-panel input{min-height:3.85rem;border-color:#caa65bc7;background:#0e0e22bd;color:#fff3ce;font-size:1.12rem;box-shadow:inset 0 0 0 1px #00000052,0 0 22px #00000029}.join-panel input:focus{border-color:#62ead7;outline:3px solid rgb(98 234 215 / .2)}button.landing-action{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.85rem;min-height:4.6rem;border:2px solid rgb(98 234 215 / .72);background:linear-gradient(180deg,#4dddc4e0,#1e7a6fe6);color:#fff9db;font-size:clamp(1rem,2vw,1.28rem);text-shadow:0 2px 0 rgb(24 48 36 / .45);box-shadow:0 0 24px #54e7d86b,inset 0 0 0 1px #ffffff38}button.landing-action:hover{background:linear-gradient(180deg,#66f5ddf0,#1f8d7df2)}button.landing-action.secondary{border-color:#caa65bc7;background:#1c162a8f;color:#f6d8a0;box-shadow:0 0 20px #caa65b24,inset 0 0 0 1px #ffffff14}button.landing-action.secondary:hover:not(:disabled){background:#362a3db8}button.landing-action:disabled{cursor:not-allowed;opacity:.58}.mushroom-button-icon{position:relative;width:1.4rem;height:1.3rem;flex:0 0 auto}.mushroom-button-icon:before{content:"";position:absolute;left:.03rem;top:.05rem;width:1.34rem;height:.76rem;border-radius:999px 999px .45rem .45rem;background:currentColor;box-shadow:inset 0 -.2rem #0000002e}.mushroom-button-icon:after{content:"";position:absolute;left:.48rem;bottom:0;width:.48rem;height:.72rem;border-radius:.18rem .18rem .3rem .3rem;background:#f6e7c4;box-shadow:inset 0 -.12rem #00000024}.mushroom-button-icon.bright{color:#a7ffe9}.mushroom-button-icon.muted{color:#d5b06f}.status,.hint{color:#c8bea2;font-size:.92rem}.landing-dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:6;display:grid;place-items:center;padding:1rem;background:radial-gradient(circle at 50% 40%,rgb(84 231 216 / .16),transparent 24rem),#04020c9e;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.join-room-dialog{display:grid;gap:1rem;width:min(30rem,100%);border:2px solid rgb(84 231 216 / .82);border-radius:8px;background:linear-gradient(145deg,#12142bf0,#150e20f5),#141023f5;padding:clamp(1rem,4vw,1.6rem);box-shadow:0 24px 70px #04020cb3,0 0 36px #41dece3d,inset 0 0 0 1px #ffffff14}.join-room-dialog .landing-alpha{margin-bottom:0}.join-room-dialog h2{margin-bottom:0;color:#fff0c7;font-family:Georgia,Times New Roman,serif;font-size:clamp(2rem,8vw,2.7rem);line-height:1;text-align:center;text-shadow:0 8px 18px rgb(0 0 0 / .34)}.join-room-dialog label{color:#f8ddb0}.join-room-dialog input{min-height:3.55rem;border-color:#caa65bc7;background:#0e0e22bd;color:#fff3ce;font-size:1.12rem;text-transform:uppercase}.join-room-dialog input:focus{border-color:#62ead7;outline:3px solid rgb(98 234 215 / .2)}.join-room-dialog .error{margin-bottom:0;text-align:center}.join-room-dialog-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.join-room-dialog-actions .landing-action{min-height:3.6rem}.winner-banner{border:2px solid #f0b95c;border-radius:8px;background:#3e2f21;color:#ffe6a8;padding:.6rem .7rem;font-weight:900}.error{color:#ff8a9a;font-weight:800}.game-shell{height:100vh;min-height:0;display:grid;grid-template-columns:260px minmax(0,1fr) 280px;overflow:hidden;background:#16121e}.sidebar{display:flex;flex-direction:column;gap:1.25rem;min-height:0;max-height:100vh;overflow:auto;border-right:3px solid #5b4a63;background:#201929;padding:1rem}.player-list{display:grid;gap:.55rem}.player-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.5rem;align-items:center;min-height:2rem}.player-row span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-row em{grid-column:2 / -1;color:#f0b95c;font-size:.8rem;font-style:normal}.swatch{width:1rem;height:1rem;border-radius:999px;border:2px solid rgb(255 246 214 / .45)}.ready-badge{font-size:.7rem;font-weight:800;text-transform:uppercase;padding:.1rem .35rem;border-radius:4px}.ready-badge.ready{background:#28796d;color:#fff6d6}.ready-badge.not-ready{background:#3a3144;color:#c8bea2}.players-panel{align-self:stretch;display:grid;align-content:start;gap:.6rem;min-width:0;min-height:0;max-height:100vh;overflow:auto;border-left:3px solid #5b4a63;background:#201929;color:#f5efd1;padding:1rem}.debug-panel{position:fixed;right:1rem;bottom:1rem;z-index:30;width:min(420px,calc(100vw - 2rem));max-height:min(720px,calc(100vh - 2rem));overflow:auto;border:2px solid #4ee6c9;border-radius:8px;background:#0d0a14f0;box-shadow:0 18px 36px #00000061,0 0 24px #4ee6c92e;color:#f8ecd0;padding:.8rem}.debug-panel.late{border-color:#f2bb5b;box-shadow:0 18px 36px #00000061,0 0 24px #f2bb5b2e}.debug-panel.stale{border-color:#ff6b78;box-shadow:0 18px 36px #00000061,0 0 24px #ff6b7833}.debug-panel-header{display:flex;align-items:start;justify-content:space-between;gap:1rem;margin-bottom:.7rem}.debug-panel-header h2{margin:.1rem 0 0;font-size:1.1rem}.debug-panel-header>span{border:1px solid rgb(248 236 208 / .26);border-radius:999px;background:#ffffff14;padding:.15rem .5rem;text-transform:uppercase;font-size:.7rem;letter-spacing:.08em}.debug-grid{display:grid;grid-template-columns:minmax(7.5rem,auto) minmax(0,1fr);gap:.35rem .8rem;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:.78rem;line-height:1.35}.debug-grid dt{color:#adffef}.debug-grid dd{min-width:0;margin:0;overflow-wrap:anywhere;color:#fff9e8}.players-panel h2{margin-bottom:0}.players-panel .player-row{grid-template-columns:auto minmax(0,1fr) auto;min-height:1.7rem}.player-stats,.players-panel-legend{display:grid;grid-template-columns:3.1rem 3.1rem;gap:.35rem;text-align:right}.player-stats span{color:#fff6d6;font-variant-numeric:tabular-nums;font-weight:900}.players-panel-legend{justify-self:end;color:#c8bea2;font-size:.68rem;font-weight:900;text-transform:uppercase}.controls{margin-top:auto}.dpad{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.queue-readout{display:grid;gap:.35rem;min-height:3.1rem;margin-bottom:.75rem;border:2px solid #5b4a63;border-radius:8px;background:#171322;padding:.65rem .75rem}.queue-readout span{color:#7fdcca;font-size:.78rem;font-weight:900;text-transform:uppercase}.queue-readout strong{color:#fff6d6;font-size:.95rem}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}.dpad button:nth-child(3){grid-column:2}.dpad button:nth-child(4){grid-column:3}.clear-queue{width:100%;margin-top:.75rem}.board-wrap{position:relative;min-width:0;min-height:0;overflow:auto;display:grid;align-items:start;justify-items:center;padding:1rem}.board-stage{display:grid;justify-items:center;gap:.5rem;min-width:max-content}.map-toolbar{position:sticky;top:0;z-index:1;display:flex;justify-content:center;width:100%;pointer-events:none}.zoom-control{display:inline-grid;grid-template-columns:repeat(3,auto);gap:.25rem;border:2px solid #5b4a63;border-radius:8px;background:#1f1928f0;padding:.25rem;box-shadow:0 12px 24px #06030c47;pointer-events:auto}.zoom-control button{min-width:3.4rem;min-height:2rem;padding:.3rem .55rem}.zoom-control button.selected{background:#28796d;color:#fff6d6;box-shadow:inset 0 0 0 2px #ffffff47}.lobby-overlay{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);display:grid;gap:1rem;width:min(340px,calc(100% - 2rem));border:3px solid #5ac7b4;border-radius:8px;background:#1f1928f7;color:#f5efd1;padding:1rem;box-shadow:0 20px 50px #06030c73}.lobby-overlay-copy{display:grid;gap:.35rem}.lobby-overlay h2,.lobby-overlay p{margin-bottom:0}.lobby-overlay button{width:100%}.connection-disconnect-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:grid;place-items:center;background:#06030cb8;padding:1rem}.connection-disconnect-dialog{display:grid;gap:.85rem;width:min(420px,100%);border:3px solid #f0b95c;border-radius:8px;background:#1f1928fa;color:#f5efd1;padding:1rem;box-shadow:0 20px 60px #00000080}.connection-disconnect-dialog h2,.connection-disconnect-dialog p{margin-bottom:0}.connection-disconnect-dialog button{width:100%}.button-with-spinner{display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.spinner{width:1rem;height:1rem;border:2px solid rgb(255 246 214 / .35);border-top-color:#fff6d6;border-radius:999px;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.lobby-settings{display:grid;gap:.75rem}.setting-label{color:#d9cfac;font-size:.82rem;font-weight:800;margin-bottom:.35rem}.setting-control{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}.setting-control button{min-width:0;padding-inline:.45rem}.setting-control button.selected{background:#28796d;color:#fff6d6;box-shadow:inset 0 0 0 2px #ffffff47}.winner-overlay{position:absolute;top:1rem;left:50%;z-index:3;transform:translate(-50%);display:flex;align-items:center;gap:.65rem;width:max-content;max-width:min(420px,calc(100% - 2rem));border:2px solid #f0b95c;border-radius:8px;background:#3e2f21;color:#fff6d6;padding:.7rem .85rem;box-shadow:0 14px 34px #06030c59;pointer-events:none}.winner-overlay-swatch{width:1.1rem;height:1.1rem;flex:0 0 auto;border:2px solid rgb(255 246 214 / .45);border-radius:999px}.winner-overlay-copy{display:grid;gap:.15rem;min-width:0}.winner-overlay strong,.winner-overlay span{overflow-wrap:anywhere}.winner-overlay strong{font-size:1rem;line-height:1.1}.winner-overlay-copy span{color:#f0d28a;font-size:.82rem;font-weight:800}.winner-confetti{position:fixed;top:0;right:0;bottom:0;left:0;z-index:4;overflow:hidden;pointer-events:none}.confetti-launcher{position:absolute;bottom:-.5rem;width:1px;height:1px}.confetti-launcher.left{left:.75rem}.confetti-launcher.right{right:.75rem}.confetti-piece{position:absolute;left:0;bottom:0;width:var(--confetti-size);height:calc(var(--confetti-size) * 1.5);border-radius:2px;background:var(--confetti-color);box-shadow:0 0 10px #fff6d638;opacity:0;animation:confetti-launch 2.6s cubic-bezier(.17,.67,.2,1) var(--confetti-delay) infinite}@keyframes confetti-launch{0%{opacity:0;transform:translate(0) rotate(0) scale(.7)}8%{opacity:1}72%{opacity:1}to{opacity:0;transform:translate(var(--confetti-drift-x),var(--confetti-drift-y)) rotate(var(--confetti-rotation)) scale(1)}}.game-canvas{width:max-content;border:3px solid #5ac7b4;border-radius:8px;overflow:hidden;box-shadow:0 20px 50px #06030c6b,0 0 0 1px #f0b95c2e}.game-canvas canvas{display:block;max-width:none}@media(max-width:860px){.landing-shell{grid-template-rows:minmax(8.5rem,25vh) auto minmax(1rem,1fr);padding:1.35rem .85rem .85rem}.landing-logo{width:min(34rem,96vw);height:clamp(7rem,22vh,11rem)}.join-panel{padding:1rem}.join-actions{grid-template-columns:1fr;gap:.75rem}.join-room-dialog-actions{grid-template-columns:1fr}button.landing-action{min-height:3.7rem}.game-shell{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto}.players-panel{max-height:24vh;border-left:0;border-top:3px solid #5b4a63}.sidebar{max-height:28vh;border-right:0;border-bottom:3px solid #5b4a63}.controls{margin-top:0}.winner-overlay{top:.75rem}}