@import "https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Caveat:wght@600;700&family=DM+Sans:wght@400;500;600;700&display=swap";:root{color:#17251d;font-synthesis:none;--ink:#17251d;--green:#174f35;--green-2:#246949;--lime:#d7ef4a;--cream:#f4ecd4;--paper:#efe4c6;--red:#c94332;--yellow:#f3c84a;--muted:#6f746b;background:#263d2c;font-family:DM Sans,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-width:320px;overflow-x:hidden}button,input{font:inherit}button{color:inherit;touch-action:manipulation;-webkit-user-drag:none}button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #efb62f}.app-shell{background:repeating-linear-gradient(0deg, transparent 0 31px, #4574931c 32px 33px), linear-gradient(90deg, transparent 0 39px, #be443733 40px 42px, transparent 43px), var(--paper);-webkit-user-select:none;user-select:none;width:100%;max-width:560px;min-height:100svh;margin:0 auto;position:relative;overflow:hidden;box-shadow:0 0 70px #0c170f73}.desk-texture{z-index:-1;background:#263d2c;position:fixed;inset:0}@media (width>=640px){.desk-texture{background-color:#263d2c;background-image:radial-gradient(circle at 50% 44%,#152d1b14 0 22%,#09180e61 100%),linear-gradient(#14271829,#08170d52),url(/assets/retro-pavilion-stadium.webp);background-position:50%;background-repeat:no-repeat;background-size:cover}}.topbar{z-index:20;justify-content:space-between;align-items:center;height:64px;padding:10px 18px;display:flex;position:relative}.topbar:after{content:"";border-bottom:1px dashed #17251d47;position:absolute;bottom:0;left:18px;right:18px}.icon-button{cursor:pointer;background:#ffffff40;border:1px solid #17251d33;border-radius:50%;place-items:center;width:40px;height:40px;display:grid}.topbar-spacer{width:40px}.mini-brand{letter-spacing:2px;align-items:center;gap:8px;font:800 13px/1 Barlow Condensed,sans-serif;display:flex}.mini-brand span{background:var(--red);color:#fff7df;letter-spacing:0;box-shadow:2px 2px 0 var(--ink);border-radius:2px;padding:7px 6px 5px;transform:rotate(-3deg)}.screen-enter{animation:.36s cubic-bezier(.2,.8,.2,1) both screenIn}@keyframes screenIn{0%{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}.home{flex-direction:column;align-items:center;min-height:calc(100svh - 64px);padding:16px 24px 28px;display:flex}.hero-copy{text-align:center;z-index:2}.eyebrow{letter-spacing:3px;color:var(--green-2);justify-content:center;align-items:center;gap:9px;margin:4px 0 12px;font:700 11px/1 Barlow Condensed,sans-serif;display:flex}.eyebrow span{border-top:2px solid;width:25px}.hero-copy h1{letter-spacing:-3px;text-shadow:3px 3px #ffffffb3;margin:0;font:900 clamp(58px,18vw,94px)/.72 Barlow Condensed,sans-serif;transform:rotate(-1.5deg)}.hero-copy h1 em{color:var(--red);letter-spacing:1px;font-size:.79em;font-style:normal;position:relative}.hero-copy h1 em:after{content:"";background:var(--yellow);z-index:-1;height:6px;position:absolute;bottom:-1px;left:2%;right:0;transform:rotate(-2deg)}.hero-tagline{color:#455248;margin:20px 0 0;font:600 17px/1.35 Caveat,cursive}.hero-tagline strong{color:var(--ink)}.pitch-mark{background:#1f5f3b21;border:2px solid #174f3561;flex:0 0 92px;width:128px;height:92px;margin:16px 0 18px;position:relative;transform:perspective(140px)rotateX(13deg)rotate(-1deg)}.crease{background:#174f3573;height:2px;position:absolute;left:8px;right:8px}.crease.top{top:18px}.crease.bottom{bottom:18px}.stumps{gap:4px;display:flex;position:absolute;top:7px;left:50%;transform:translate(-50%)}.stumps i{background:var(--green);width:2px;height:18px}.ball-mark{background:var(--red);border-radius:50%;width:15px;height:15px;position:absolute;top:49px;left:32px;box-shadow:inset -3px -2px #5a100d40}.ball-mark:after{content:"";background:#f1b7a6;width:12px;height:1px;position:absolute;top:7px;left:2px;transform:rotate(55deg)}.home-actions{z-index:3;align-self:stretch;gap:10px;width:auto;display:grid;position:relative}.primary-button,.secondary-button{cursor:pointer;border:0;border-radius:5px;justify-content:center;align-items:center;gap:11px;min-height:58px;font-weight:800;transition:transform .15s,box-shadow .15s;display:flex}.primary-button{background:var(--green);color:#fff9e9;box-shadow:0 5px #0d3020,0 9px 18px #14372333}.primary-button:active,.secondary-button:active{box-shadow:none;transform:translateY(3px)}.primary-button:disabled{opacity:.45;cursor:not-allowed}.friend-button{text-align:left;justify-content:flex-start;min-height:68px;padding:10px 14px}.friend-button>span:nth-child(2){flex:1;font-size:17px}.friend-button small{color:var(--lime);letter-spacing:1.7px;font:700 10px/1.5 Barlow Condensed,sans-serif;display:block}.button-icon{background:#ffffff1a;border-radius:50%;place-items:center;width:42px;height:42px;display:grid}.secondary-button{background:#ffffff7a;border:1px solid #17251d33;box-shadow:0 3px #17251d3d}.live-dot{color:#4a6819;letter-spacing:1px;background:#deec9a;border-radius:9px;margin-left:auto;padding:4px 7px;font:800 9px/1 Barlow Condensed,sans-serif}.text-button{cursor:pointer;color:#4d594f;background:0 0;border:0;justify-content:center;align-items:center;gap:6px;min-height:38px;font-size:13px;display:flex}.text-button strong{color:var(--green);text-decoration:underline}.notebook-strip{background:#ffffff29;border-top:1px dashed #17251d4d;border-bottom:1px dashed #17251d40;justify-content:space-around;align-self:stretch;width:auto;margin:auto -24px 0;padding:15px 24px 11px;display:flex}.notebook-strip div{text-align:center;border-right:1px solid #17251d24;flex:1}.notebook-strip div:last-child{border:0}.notebook-strip strong{font:800 19px/1 Barlow Condensed,sans-serif;display:block}.notebook-strip span{letter-spacing:1.4px;color:var(--muted);font:700 8px/1.5 Barlow Condensed,sans-serif}.how-button{cursor:pointer;color:#5f665f;background:0 0;border:0;align-items:center;gap:6px;margin-top:10px;font:600 12px/1 DM Sans;display:flex}.section-kicker{color:var(--red);letter-spacing:2.5px;font:800 11px/1 Barlow Condensed,sans-serif}.toss-screen,.break-screen,.result-screen,.join-screen,.room-screen{text-align:center;flex-direction:column;align-items:center;min-height:calc(100svh - 64px);padding:45px 25px 28px;display:flex}.toss-screen h2,.break-screen h2,.result-screen h2,.join-screen h2,.room-screen h2,.rules-modal h2{text-transform:uppercase;margin:10px 0 8px;font:900 48px/.95 Barlow Condensed,sans-serif}.toss-screen>p,.join-screen>p,.room-screen>p,.result-screen>p{color:#687068;margin:0;font-size:14px}.coin{background:#d9a732;border:8px double #9d6b16;border-radius:50%;place-items:center;width:128px;height:128px;margin:45px 0 35px;display:grid;box-shadow:inset 7px 8px #ffffff36,0 10px #76521b,0 17px 22px #2b25153b}.coin-face{color:#6d480d;border:2px dashed #5b380894;border-radius:50%;place-items:center;width:88px;height:88px;font:900 42px/.7 Barlow Condensed,sans-serif;display:grid}.coin-face span{letter-spacing:2px;margin-top:-23px;font-size:10px;display:block}.coin.flipping{animation:.22s linear infinite coinFlip}.coin.landed{animation:.45s cubic-bezier(.17,.67,.2,1.4) coinLand}@keyframes coinFlip{50%{transform:rotateY(90deg)translateY(-12px)}}@keyframes coinLand{0%{transform:translateY(-45px)rotateY(540deg)}to{transform:none}}.toss-actions{grid-template-columns:1fr 1fr;gap:13px;width:100%;display:grid}.toss-actions button{background:var(--green);color:#fff;letter-spacing:2px;cursor:pointer;border:0;border-radius:4px;height:62px;font:800 18px/1 Barlow Condensed;box-shadow:0 5px #0c3421}.waiting-copy{color:#626b63;font:700 16px/1 Caveat,cursive;animation:1s infinite pulse}@keyframes pulse{50%{opacity:.45}}.role-choice{width:100%}.role-choice h3{margin:15px 0;font:700 20px/1.2 Barlow Condensed}.role-choice>div:last-child{grid-template-columns:1fr 1fr;gap:12px;display:grid}.role-choice>div>button{cursor:pointer;background:#ffffff73;border:1px solid #17251d2b;border-radius:6px;place-items:center;min-height:92px;display:grid;box-shadow:0 4px #17251d33}.role-choice button span{font-size:27px}.role-choice button strong{letter-spacing:1px;font:800 20px/1 Barlow Condensed}.role-choice button small{color:#697169}.result-ribbon{color:#fff;letter-spacing:1.5px;padding:7px 14px;font:800 11px/1 Barlow Condensed;display:inline-block;transform:rotate(-1deg)}.result-ribbon.won{background:var(--green)}.result-ribbon.lost{background:var(--red)}.pop-in{animation:.34s cubic-bezier(.2,1.6,.4,1) both popIn}@keyframes popIn{0%{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}.primary-button.slim{width:100%;min-height:56px;margin-top:14px}.game-screen{min-height:calc(100svh - 64px);padding-bottom:172px;position:relative}.game-meta{letter-spacing:1.6px;justify-content:space-between;align-items:center;padding:10px 18px 7px;font:800 10px/1 Barlow Condensed;display:flex}.status-pill{color:#4e654e;align-items:center;gap:5px;display:flex}.status-pill i{background:#60a64c;border-radius:50%;width:6px;height:6px;display:block;box-shadow:0 0 0 3px #60a64c2e}.scoreboard{color:#f6efd8;background:#14251b;border:5px solid #283a2f;grid-template-columns:1fr 76px 1fr;align-items:stretch;height:89px;margin:0 12px;display:grid;box-shadow:0 5px #08120c4d}.scoreboard>div:not(.score-divider){opacity:.68;flex-direction:column;padding:11px 9px;display:flex}.scoreboard>div:last-child{text-align:right;align-items:flex-end}.scoreboard .active-team{background:#d7ef4a0f;opacity:1!important}.scoreboard span{letter-spacing:.8px;min-height:20px;font:700 9px/1.1 Barlow Condensed}.scoreboard strong{color:var(--lime);font:800 37px/.85 Barlow Condensed}.scoreboard strong small{color:#f6efd8;font-size:18px}.score-divider{border-left:1px dashed #ffffff2e;border-right:1px dashed #ffffff2e;flex-direction:column;justify-content:center;align-items:center;display:flex}.score-divider strong{color:#fff;font-size:18px}.score-divider em{color:var(--yellow);letter-spacing:.8px;margin-top:5px;font:700 8px/1 Barlow Condensed}.chase-bar{background:var(--red);color:#fff;justify-content:center;align-items:center;gap:5px;height:25px;margin:6px 12px 0;font:600 10px/1 DM Sans;display:flex;transform:rotate(-.3deg)}.chase-bar strong{letter-spacing:.7px;font:800 12px/1 Barlow Condensed}.reveal-stage{grid-template-rows:1fr 1fr;height:min(40vh,330px);min-height:255px;margin-top:5px;display:grid;position:relative;overflow:hidden}.reveal-stage:after{content:"";border-top:1px dashed #17251d33;position:absolute;top:50%;left:10%;right:10%}.opponent-side,.player-side{justify-content:center;align-items:center;gap:20px;display:flex}.opponent-side{flex-direction:row-reverse}.player-label{color:#5f695f;letter-spacing:1px;align-items:center;gap:5px;width:94px;font:800 10px/1 Barlow Condensed;display:flex}.opponent-side .player-label{justify-content:flex-end}.hand-card{filter:drop-shadow(0 8px 6px #1e1f182b);border-radius:44% 48% 46% 42%;place-items:center;width:106px;height:108px;display:grid;position:relative}.hand-card:after{content:"";border-radius:inherit;border:2px dashed #4a2d1f40;position:absolute;inset:6px}.hand-card span{z-index:2;font-size:61px;transform:translateY(-2px)}.hand-card b{color:#fff;background:var(--red);z-index:3;width:28px;height:28px;box-shadow:2px 2px 0 var(--ink);border-radius:50%;place-items:center;font:800 15px/1 Barlow Condensed;display:grid;position:absolute;top:-4px;right:-7px}.bot-hand{background:#d7ad87;transform:rotate(5deg)}.player-hand{background:#e6c09b;transform:rotate(-5deg)}.reveal-stage.locked .player-hand{animation:.42s infinite alternate handReady}.reveal-stage.reveal .bot-hand{animation:.36s cubic-bezier(.2,1.6,.4,1) botReveal}.reveal-stage.reveal .player-hand{animation:.36s cubic-bezier(.2,1.6,.4,1) playerReveal}@keyframes handReady{to{transform:rotate(-5deg)translateY(-5px)}}@keyframes botReveal{0%{transform:translateY(-70px)rotate(13deg)}to{transform:rotate(5deg)}}@keyframes playerReveal{0%{transform:translateY(70px)rotate(-13deg)}to{transform:rotate(-5deg)}}.versus{z-index:3;background:var(--yellow);place-items:center;width:35px;height:27px;font:900 14px/1 Barlow Condensed;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-6deg);box-shadow:2px 2px #17251dbf}.locked-message{z-index:4;background:var(--green);color:#fff;white-space:nowrap;border-radius:16px;align-items:center;gap:6px;padding:8px 12px;font-size:11px;font-weight:700;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ball-call{z-index:6;color:#fff;background:var(--green);white-space:nowrap;letter-spacing:1px;box-shadow:3px 3px 0 var(--ink);padding:7px 18px;font:900 24px/.9 Barlow Condensed;animation:.4s cubic-bezier(.1,1.7,.3,1) callout;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-3deg)}.ball-call.wicket{background:var(--red);font-size:31px}.ball-call.boundary{background:#c27b18}@keyframes callout{0%{transform:translate(-50%,-50%)scale(.2)rotate(8deg)}}.ball-history{justify-content:center;align-items:center;gap:5px;height:27px;display:flex}.ball-history span:not(.empty-history){background:#17251d1f;border-radius:50%;place-items:center;width:22px;height:22px;font:700 10px/1 DM Sans;display:grid}.ball-history .wicket-ball{color:#fff;background:var(--red)!important}.ball-history .empty-history{color:#707870;font:600 12px/1 Caveat}.choice-dock{z-index:10;width:min(560px,100%);padding:8px 13px max(14px, env(safe-area-inset-bottom));background:#f6ecd1;border-top:2px solid #17251d38;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -8px 20px #1f2e231f}.choice-dock p{text-align:center;margin:0 0 7px;font:700 13px/1 Caveat,cursive}.number-grid{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.number-grid button{cursor:pointer;background:#fffaf0;border:1px solid #17251d2e;border-radius:5px;flex-direction:column;justify-content:center;align-items:center;min-width:0;height:85px;padding:4px 1px;transition:all .12s;display:flex;box-shadow:0 4px #17251d42}.number-grid button span{filter:saturate(.86);font-size:clamp(26px,8vw,38px);line-height:1.1}.number-grid button strong{font:800 14px/1 Barlow Condensed}.number-grid button:disabled{opacity:.5;box-shadow:none;transform:translateY(3px)}.number-grid button.selected{background:var(--yellow);opacity:1;border-color:var(--ink);box-shadow:none;transform:translateY(3px)}.break-screen{padding-top:28px}.chalk-circle{border:5px double var(--green);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:135px;height:135px;display:flex;transform:rotate(-4deg);box-shadow:0 0 0 4px #174f3514}.chalk-circle span{letter-spacing:3px;font:700 15px/1 Barlow Condensed}.chalk-circle strong{color:var(--red);font:900 33px/.9 Barlow Condensed}.mini-scorecard{background:var(--ink);color:#fff;text-align:left;grid-template-columns:1fr 1fr;align-items:center;width:100%;max-width:300px;margin:24px 0 9px;padding:12px 18px;display:grid}.mini-scorecard span{letter-spacing:1px;font:700 12px/1 Barlow Condensed}.mini-scorecard strong{color:var(--lime);text-align:right;grid-row:span 2;font:800 44px/1 Barlow Condensed}.mini-scorecard strong small{color:#fff;font-size:21px}.mini-scorecard em{color:#aeb9af;font-size:10px;font-style:normal}.break-screen>p{color:#687168;margin:5px 0 20px;font:600 16px/1 Caveat}.target-card{border:2px solid var(--red);background:#ffffff42;flex-direction:column;justify-content:center;align-items:center;width:190px;height:130px;display:flex;position:relative;transform:rotate(1deg)}.target-card:before,.target-card:after{content:"";background:#cbb1708c;width:28px;height:10px;position:absolute;top:-7px;transform:rotate(-10deg)}.target-card:before{left:8px}.target-card:after{right:8px;transform:rotate(10deg)}.target-card small,.target-card span{letter-spacing:2px;font:800 10px/1 Barlow Condensed}.target-card strong{color:var(--red);font:900 60px/.92 Barlow Condensed}.break-screen .primary-button{max-width:320px;margin-top:28px}.result-badge{border-radius:50%;place-items:center;width:76px;height:76px;margin-bottom:20px;display:grid}.result-badge.victory{background:var(--yellow);color:#684b08;box-shadow:0 0 0 7px #f3c84a38}.result-badge.defeat{background:#d8cdb1;font-size:33px}.result-screen h2{font-size:57px}.result-screen h2 em{color:var(--red);font-style:normal}.final-scorecard{background:var(--ink);color:#fff;border:5px solid #304239;grid-template-columns:1fr 40px 1fr;align-items:center;width:100%;margin:32px 0 25px;padding:13px;display:grid}.final-scorecard>div:not(.scorecard-vs){display:grid;position:relative}.final-scorecard span{letter-spacing:1.5px;font:700 11px/1 Barlow Condensed}.final-scorecard strong{font:900 40px/1 Barlow Condensed}.final-scorecard strong small{font-size:18px}.final-scorecard .winner strong{color:var(--lime)}.final-scorecard svg{color:var(--yellow);position:absolute;top:-7px;right:2px}.scorecard-vs{color:#89968e;font:800 11px/1 Barlow Condensed}.result-screen>button{width:100%}.rematch-button{margin-bottom:13px}.result-screen .text-button{margin-top:8px}.join-screen label{text-align:left;letter-spacing:1.5px;width:100%;max-width:340px;margin:45px 0 7px;font:800 10px/1 Barlow Condensed}.join-screen input{border:2px solid var(--green);text-align:center;text-transform:uppercase;letter-spacing:9px;width:100%;max-width:340px;height:77px;color:var(--ink);-webkit-user-select:text;user-select:text;background:#ffffff80;border-radius:4px;font:900 34px/1 Barlow Condensed;box-shadow:inset 0 0 0 4px #174f3512}.join-screen input::placeholder{opacity:.25}.join-screen .primary-button{max-width:340px;margin-top:17px}.privacy-note{color:#657068;align-items:center;gap:7px;max-width:310px;margin-top:auto;font-size:11px;display:flex}.room-screen{padding-top:35px}.room-code-card{background:#ffffff4d;border:2px dashed #174f357a;width:100%;max-width:360px;margin:30px 0 16px;padding:18px 12px 13px;transform:rotate(-.5deg)}.room-code-card small{letter-spacing:2px;color:#687068;font:800 9px/1 Barlow Condensed;display:block}.room-code-card strong{letter-spacing:7px;color:var(--green);margin:7px 0;font:900 42px/1 Barlow Condensed;display:block}.room-code-card button{color:var(--red);cursor:pointer;letter-spacing:1px;background:0 0;border:0;align-items:center;gap:5px;font:800 10px/1 Barlow Condensed;display:inline-flex}.share-button{width:100%;max-width:360px}.waiting-room{width:100%;margin-top:25px}.player-seat{text-align:left;background:#ffffff54;border:1px solid #17251d29;align-items:center;gap:11px;min-height:56px;padding:9px 13px;display:flex}.player-seat>span{flex:1}.player-seat strong,.player-seat small{display:block}.player-seat strong{font-size:13px}.player-seat small{letter-spacing:1.3px;color:#68806a;font:700 8px/1.7 Barlow Condensed}.player-seat.ready>svg:last-child{color:var(--green-2)}.player-seat.waiting{opacity:.7}.connector{grid-template-columns:1fr 34px 1fr;align-items:center;height:27px;display:grid}.connector i{border-top:1px dashed #17251d4d}.connector span{font:800 10px/1 Barlow Condensed}.loader{border:2px solid #174f3540;border-top-color:var(--green);border-radius:50%;width:15px;height:15px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.prototype-note{text-align:left;color:#5f6258;background:#f3c84a2e;border:1px solid #9c70162e;align-items:flex-start;gap:8px;margin-top:16px;padding:10px 12px;font-size:10px;display:flex}.prototype-note svg{color:var(--green);flex:none}.prototype-note strong{color:var(--ink);font-size:11px;display:block}.room-screen>.text-button{margin-top:6px}.modal-backdrop{z-index:50;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#09140d9e;justify-content:center;align-items:flex-end;padding-top:30px;display:flex;position:fixed;inset:0}.rules-modal{background:var(--paper);width:min(560px,100%);max-height:92svh;padding:30px 25px max(28px, env(safe-area-inset-bottom));border-radius:18px 18px 0 0;position:relative;overflow-y:auto;box-shadow:0 -12px 45px #0000004d}.modal-close{cursor:pointer;background:#ffffff4d;border:1px solid #17251d33;border-radius:50%;place-items:center;width:38px;height:38px;display:grid;position:absolute;top:17px;right:17px}.rules-modal h2{margin-bottom:22px}.rules-modal ol{gap:9px;margin:0;padding:0;list-style:none;display:grid}.rules-modal li{border-bottom:1px dashed #17251d38;align-items:center;gap:12px;min-height:61px;padding:9px;display:flex}.rules-modal li>span{background:var(--green);color:#fff;border-radius:50%;flex:none;place-items:center;width:35px;height:35px;font:800 17px/1 Barlow Condensed;display:grid}.rules-modal li p{color:#677067;margin:0;font-size:12px}.rules-modal li strong{color:var(--ink);font-size:13px;display:block}@media (width>=700px){body{padding:20px 0}.app-shell{border-radius:14px;min-height:calc(100svh - 40px)}.home,.toss-screen,.break-screen,.result-screen,.join-screen,.room-screen{min-height:calc(100svh - 104px)}.choice-dock{border-radius:0 0 14px 14px;bottom:20px}.modal-backdrop{align-items:center}.rules-modal{border-radius:14px;max-width:500px}}@media (height<=720px){.home{padding-top:7px}.hero-copy h1{font-size:61px}.hero-tagline{margin-top:14px}.pitch-mark{flex-basis:65px;height:65px;margin:8px 0 12px}.notebook-strip{margin-top:16px}.toss-screen{padding-top:24px}.coin{width:105px;height:105px;margin:25px 0}.coin-face{width:72px;height:72px}.reveal-stage{min-height:235px}.hand-card{width:91px;height:91px}.hand-card span{font-size:51px}.number-grid button{height:69px}}@media (width<=400px){.hero-copy h1{font-size:64px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.online-card{text-align:center;flex-direction:column;align-items:center;min-height:calc(100svh - 64px);padding:42px 30px 30px;display:flex}.online-card h2{margin:8px 0 7px}.online-card>p{color:#647067;max-width:340px;margin:0 0 24px}.online-card label{text-align:left;letter-spacing:1.5px;width:100%;max-width:340px;margin:20px 0 7px;font:800 10px/1 Barlow Condensed}.online-card label span{float:right;color:#7a827c}.online-card input{border:2px solid var(--green);width:100%;max-width:340px;height:59px;color:var(--ink);-webkit-user-select:text;user-select:text;background:#ffffff7a;border-radius:4px;padding:0 16px;font:800 23px/1 Barlow Condensed}.online-card .primary-button{width:100%;max-width:340px;margin-top:16px}.queue-screen{justify-content:center;padding-bottom:90px}.queue-screen .secondary-button{width:100%;max-width:340px;margin-top:20px}.queue-radar{width:116px;height:116px;color:var(--green);background:#174f351a;border-radius:50%;place-items:center;margin-bottom:28px;display:grid;position:relative}.queue-radar i{border:1px solid #174f355c;border-radius:50%;animation:1.8s ease-out infinite radar-pulse;position:absolute;inset:12px}.queue-radar i:nth-child(3){animation-delay:.6s}.queue-radar i:nth-child(4){animation-delay:1.2s}@keyframes radar-pulse{0%{opacity:1;transform:scale(.35)}to{opacity:0;transform:scale(1.55)}}.queue-time,.online-timer{color:#657068;letter-spacing:1px;align-items:center;gap:6px;font:800 12px/1 Barlow Condensed;display:inline-flex}.spin-icon{color:var(--green);animation:.9s linear infinite spin}.error-screen{justify-content:center}.error-screen .secondary-button{width:100%;max-width:340px;margin-top:10px}.role-buttons{gap:10px;width:100%;max-width:340px;margin-top:18px;display:grid}.connection-banner{z-index:8;color:#fff;letter-spacing:.6px;background:#183c2b;border-radius:99px;align-items:center;gap:6px;width:max-content;max-width:calc(100% - 24px);padding:7px 11px;font:700 10px/1.2 Barlow Condensed;display:flex;position:absolute;top:8px;left:50%;transform:translate(-50%);box-shadow:0 3px 10px #00000038}.connection-banner.opponent{background:#935429}.online-game{position:relative}.online-game .player-label{text-overflow:ellipsis;white-space:nowrap;max-width:125px;overflow:hidden}@media (width>=700px){.online-card{min-height:calc(100svh - 104px)}}