/* Slime Soccer Online — same floodlit-night identity as the offline game. */ :root{ --night:#080C22; --sky:#131C46; --stand:#111838; --panel:#161F45; --line:#26305E; --chalk:#E8EEF2; --mist:#8E9AC4; --amber:#F7C548; --violet:#A177FF; --good:#4ADE80; --bad:#FB7185; --step:clamp(14px,2.4vw,26px); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} /* Any display rule outranks the UA's [hidden]{display:none}, and this has now bitten the modal, the pagers and the profile card. Settle it once. */ [hidden]{display:none !important} body{ margin:0; min-height:100vh; background: radial-gradient(1100px 520px at 50% -180px, #1A2452 0%, rgba(26,36,82,0) 70%), var(--night); color:var(--chalk); font-family:"Chivo","Helvetica Neue",Arial,sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } .wrap{max-width:1020px;margin:0 auto;padding:var(--step) var(--step) 56px; display:flex;flex-direction:column;gap:var(--step)} /* ---------- header ---------- */ .lockup{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 20px;padding-top:8px} .mark{ margin:0;font-family:"Anton","Impact","Arial Narrow",sans-serif;font-weight:400; font-size:clamp(30px,5.4vw,50px);line-height:0.92;letter-spacing:0.01em; text-transform:uppercase;color:var(--chalk); } .mark span{color:var(--amber);display:inline-block;margin-left:0.18em} .status{ font-family:"DM Mono",ui-monospace,monospace;font-size:11px;letter-spacing:0.09em; text-transform:uppercase;color:var(--mist);display:flex;align-items:center;gap:8px; padding-bottom:6px; } .status .sep{opacity:.4} .pip{width:9px;height:9px;border-radius:999px;background:var(--bad);flex:none; box-shadow:0 0 0 3px rgba(251,113,133,0.15)} body[data-connected="1"] .pip{background:var(--good);box-shadow:0 0 0 3px rgba(74,222,128,0.15)} /* ---------- screens ---------- */ .screen{display:none;flex-direction:column;gap:var(--step)} /* Row 1: your slime | find a match | play on this device, equal height. Row 2: controls | goal of the week (wider, to its right). Row 3: the ranked ladder, full width. */ body[data-screen="lobby"] .lobby, body[data-screen="connecting"] .lobby{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;align-items:stretch; } body[data-screen="connecting"] .lobby{opacity:.45;pointer-events:none} body[data-screen="match"] .match{display:flex} .card.controls{grid-column:1} .card.gotwMain{grid-column:2 / -1} .card.board{grid-column:1 / -1} @media (max-width:940px){ body[data-screen="lobby"] .lobby, body[data-screen="connecting"] .lobby{grid-template-columns:repeat(2,minmax(0,1fr))} .card.controls{grid-column:auto} .card.gotwMain{grid-column:1 / -1} } @media (max-width:640px){ body[data-screen="lobby"] .lobby, body[data-screen="connecting"] .lobby{grid-template-columns:1fr} .card.gotwMain,.card.board{grid-column:auto} } /* ---------- cards ---------- */ .card{ background:var(--panel);border:1px solid var(--line);border-radius:14px; padding:18px;display:flex;flex-direction:column;gap:14px; } .card h2{ margin:0;font-weight:900;font-size:12px;letter-spacing:0.16em;text-transform:uppercase; color:var(--chalk); } .card.board{grid-column:1/-1} .muted{color:var(--mist);margin:0;font-size:13px} .small{font-size:12px} .err{margin:0;color:var(--bad);font-size:13px} .field{display:flex;flex-direction:column;gap:6px} .field label{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:0.16em; text-transform:uppercase;color:var(--mist)} input[type=text],select{ width:100%;font-family:"Chivo",sans-serif;font-weight:700;font-size:14px; color:var(--chalk);background:#0D1433;border:1px solid var(--line);border-radius:9px; padding:10px 12px; } input[type=text]::placeholder{color:#5A67A0;font-weight:400} select{appearance:none;cursor:pointer;padding-right:30px; background-image:linear-gradient(45deg,transparent 50%,var(--mist) 50%), linear-gradient(135deg,var(--mist) 50%,transparent 50%); background-position:calc(100% - 16px) calc(50% + 1px),calc(100% - 11px) calc(50% + 1px); background-size:5px 5px,5px 5px;background-repeat:no-repeat} select option{background:#0D1433;color:var(--chalk)} input:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid var(--violet);outline-offset:2px} .kitRow{display:flex;align-items:center;gap:10px} .kitRow select{flex:1;min-width:0} .swatch{width:66px;height:38px;flex:none;display:block} /* ---------- buttons ---------- */ .btn{ appearance:none;cursor:pointer;font-family:"Chivo",sans-serif;font-weight:900; font-size:12px;letter-spacing:0.12em;text-transform:uppercase; padding:11px 18px;border-radius:9px; background:var(--amber);color:#151007;border:1px solid var(--amber); transition:transform .12s ease,filter .15s ease; } .btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.45;cursor:not-allowed;filter:none;transform:none} .btn.ghost{background:transparent;color:var(--mist);border-color:var(--line)} .btn.ghost:hover{color:var(--chalk);border-color:var(--mist)} .btn.ghost.danger:hover{color:var(--bad);border-color:var(--bad)} .btn.small{padding:8px 14px;font-size:11px} .btn.big{ display:grid;grid-template-columns:1fr auto;gap:2px 12px;text-align:left; padding:14px 16px;margin-bottom:10px;width:100%; background:#0D1433;border:1px solid var(--line);color:var(--chalk); } .btn.big:hover{border-color:var(--amber);filter:none} .btn.big .bigLabel{font-size:15px;letter-spacing:0.1em;color:var(--amber)} .btn.big.ranked .bigLabel{color:var(--violet)} .btn.big.ranked:hover{border-color:var(--violet)} .btn.big .bigSub{grid-column:1;font-weight:400;font-size:12px;letter-spacing:0.02em; text-transform:none;color:var(--mist)} .btn.big .qcount{grid-column:2;grid-row:1/3;align-self:center; font-family:"DM Mono",monospace;font-size:11px;letter-spacing:0.06em; text-transform:none;color:var(--mist);white-space:nowrap} /* ---------- signed-in card ---------- */ .me{display:flex;align-items:center;gap:12px} .meName{font-family:"Anton",sans-serif;font-size:26px;line-height:1;letter-spacing:0.02em} .meRating{font-family:"DM Mono",monospace;font-size:13px;color:var(--amber); display:flex;gap:8px;align-items:baseline} .meRating .muted{font-size:11px} /* Four columns for four stats. It said five for a while, left over from a fifth tile that went away, so the row stopped short of the rank block underneath it and the card looked lopsided. */ .record{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0} .record div{background:#0D1433;border:1px solid var(--line);border-radius:9px;padding:8px 4px;text-align:center} .record dt{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:0.12em; text-transform:uppercase;color:var(--mist)} .record dd{margin:2px 0 0;font-family:"Anton",sans-serif;font-size:17px; font-variant-numeric:tabular-nums} /* ---------- searching ---------- */ .searching{display:flex;align-items:center;gap:14px;margin-bottom:14px} .searchTitle{font-family:"Anton",sans-serif;font-size:22px;letter-spacing:0.02em} .spinner{width:26px;height:26px;flex:none;border-radius:999px; border:3px solid var(--line);border-top-color:var(--amber);animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* ---------- leaderboard ---------- */ .tableWrap{overflow-x:auto} table{width:100%;border-collapse:collapse;font-size:13px} th{font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase; color:var(--mist);text-align:left;padding:0 10px 8px;font-weight:400;white-space:nowrap} td{padding:8px 10px;border-top:1px solid var(--line);white-space:nowrap} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} tbody tr.you{background:rgba(247,197,72,0.07)} tbody tr.you td:first-child{box-shadow:inset 3px 0 0 var(--amber)} .lbName{display:flex;align-items:center;gap:9px} .lbFlag{width:26px;height:15px;flex:none;border-radius:2px} .rankCell{font-family:"Anton",sans-serif;font-size:15px;color:var(--mist)} tr.empty td{color:var(--mist);text-align:center;padding:18px 10px} .prov{font-size:10px;color:var(--mist);letter-spacing:.08em} /* ---------- match ---------- */ .cabinet{ background:linear-gradient(180deg,#111A40,#0B1130);border:1px solid var(--line); border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:10px; box-shadow:0 30px 70px -40px #000, inset 0 1px 0 rgba(232,238,242,0.06); } .board2{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px; padding:10px 16px 12px;background:var(--stand);border:1px solid var(--line);border-radius:12px} .team{display:flex;align-items:center;gap:9px;min-width:0} .team.t2{justify-content:flex-end} .dot{width:15px;height:15px;border-radius:999px;flex:none;background:var(--amber); box-shadow:0 0 0 3px rgba(255,255,255,0.06)} .t2 .dot{background:var(--violet)} .team .name{font-weight:900;text-transform:uppercase;letter-spacing:0.12em;font-size:12px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .t1 .name{color:var(--amber)} .t2 .name{color:var(--violet)} .team .elo{font-family:"DM Mono",monospace;font-size:11px;color:var(--mist)} .tally{display:flex;flex-direction:column;align-items:center;gap:3px} .score{font-family:"Anton",sans-serif;font-size:clamp(32px,5.6vw,44px);line-height:1; display:flex;align-items:baseline;gap:10px;font-variant-numeric:tabular-nums} #mS1{color:var(--amber)} #mS2{color:var(--violet)} .dash{color:var(--mist);opacity:.45;font-size:0.66em} .meta{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:0.1em; text-transform:uppercase;color:var(--mist);display:flex;gap:8px;white-space:nowrap} .meta b{color:var(--chalk);font-weight:500} #pitch{display:block;width:100%;height:auto;aspect-ratio:960/460;border-radius:12px; background:var(--sky);border:1px solid var(--line);touch-action:none} .matchbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .matchbar .spacer{flex:1} /* ---------- touch controls, over the pitch ---------- */ .pitchWrap{position:relative;line-height:0} /* Sat under the canvas, these were easy to miss on a phone, and a miss landed on the page and scrolled it mid-match. Overlaid, a miss still lands on the pad. touch-action:none on the whole wrapper is what actually stops the scrolling — the buttons alone were never the problem. */ /* Positioned to the CANVAS, not the wrapper. The pitch is letterboxed inside the wrapper on most screens, so inset:0 put the stick and the jump button out in the black margin, away from the picture they belong to. The exact box is set from JavaScript, which is also what re-runs on rotation. */ .touchpad{ display:none;position:absolute;inset:0; touch-action:none;-webkit-user-select:none;user-select:none; pointer-events:none; /* only the controls themselves take touches */ } .touchpad .stick,.touchpad .jumpBtn{pointer-events:auto} /* Sized against the PITCH, not the viewport. In portrait the pitch is only a few hundred pixels tall while 30vw is not, so viewport units made the pad bigger than the thing it was sitting on. */ /* Inset past the goal frame and sat lower. A goal is 56 of 960 units wide, just under 6% of the pitch, and the pad used to start at 3% — so it sat directly on top of the net and you could not see the ball go in. */ /* Overlay sizing, used only when the pitch fills the height and there is no band underneath — a phone in landscape. Kept small and well inside the goal frames, which are the outer 6% of the pitch. */ .stick{ position:absolute;left:9%;bottom:5%; height:34%;width:auto;aspect-ratio:1;max-height:96px; display:grid;place-items:center; } .stickBase{ position:absolute;inset:0;border-radius:999px; background:rgba(12,18,44,.42);border:2px solid rgba(232,238,242,.30); backdrop-filter:blur(2px); } .stickNub{ position:absolute;width:44%;aspect-ratio:1;border-radius:999px; background:rgba(247,197,72,.82);border:2px solid rgba(255,255,255,.65); box-shadow:0 4px 14px rgba(0,0,0,.45); transform:translateX(0);transition:transform .06s linear; } .stick.holding .stickNub{transition:none} .stickHint{ position:absolute;bottom:6%;left:0;right:0;text-align:center; font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:rgba(232,238,242,.55);line-height:1; } .stick.holding .stickHint{opacity:0} .jumpBtn{ position:absolute;right:9%;bottom:6%; height:27%;width:auto;aspect-ratio:1;max-height:78px;border-radius:999px; background:rgba(12,18,44,.42);border:2px solid rgba(232,238,242,.30); backdrop-filter:blur(2px); color:var(--chalk);font-family:"Chivo",sans-serif;font-weight:900; font-size:clamp(12px,3.4vw,16px);letter-spacing:.12em; display:grid;place-items:center; } .jumpBtn span{pointer-events:none} .jumpBtn:active,.jumpBtn.on{ background:rgba(247,197,72,.85);color:#151007;border-color:rgba(255,255,255,.7); } /* Full screen. Hidden where the browser cannot do it (notably iPhone Safari, which only allows it for video) — offering a button that does nothing is worse than not offering one. */ /* Above the score strip, which is absolutely positioned across the top and would otherwise paint over it — clickable but invisible. */ .fsBtn{ position:absolute;top:8px;right:8px;z-index:7; /* Inside the wrapper, which is already inset, so only a nudge is needed. */width:38px;height:38px;border-radius:10px; background:rgba(12,18,44,.5);border:1px solid rgba(232,238,242,.25); color:var(--chalk);display:none;place-items:center;padding:0; } .fsBtn svg{width:19px;height:19px} body[data-screen="match"] .fsBtn.available{display:grid} /* Sitting in the band below the pitch. Nothing is over the picture, so the controls can be generous again — easier to hit, and the goal stays clear. */ .touchpad.below{background:transparent} .touchpad.below .stick{ left:7%;bottom:auto;top:50%;transform:translateY(-50%); height:74%;max-height:140px; } .touchpad.below .jumpBtn{ right:7%;bottom:auto;top:50%;transform:translateY(-50%); height:62%;max-height:118px; } .touchpad.below .stickHint{bottom:2%} /* Down in the two bottom corners. This is the phone-in-landscape case. * * NOT centred in the side margins, which is where they started: in landscape * the Dynamic Island sits in the middle of that edge and swallowed the left * stick whole. Everything the island covers is in the middle third. * * NOT flush to the screen edge either. A control hard against the side of the * phone is a control you fight your case for, and going left was the one that * suffered — so both come in by --inset. * * They may lie over the bottom of the picture, because the bottom 14% of the * canvas is grass: the ball is clamped above the goal line and a slime stands * on it, so nothing that matters is ever drawn down there. --face is sized in * script from whichever is roomier, the column beside the pitch or that strip, * and BOTH sides get the same number so they line up. */ .touchpad.beside .stick{ left:var(--inset, 12px);width:var(--face, 88px);max-width:none; /* max-height as well as height: the overlay rule caps the stick at 96px, and with only `height:auto` here a taller face hung out of the bottom of its own box, straight over the home indicator. */ height:var(--face, 88px);max-height:none;aspect-ratio:auto; top:auto;bottom:var(--floor, 8px);transform:none; display:grid;place-items:center; } .touchpad.beside .stickBase{ position:relative;inset:auto; width:100%;aspect-ratio:1; } .touchpad.beside .stickNub{width:min(37%, 46px)} .touchpad.beside .jumpBtn{ right:var(--inset, 12px);left:auto;width:var(--face, 88px);max-width:none; height:var(--face, 88px);max-height:none;aspect-ratio:auto; border-radius:999px;background:rgba(12,18,44,.42); border:2px solid rgba(232,238,242,.30);backdrop-filter:blur(2px); top:auto;bottom:var(--floor, 8px);transform:none; display:grid;place-items:center; font-size:clamp(11px,2.8vw,15px); } .touchpad.beside .stickHint{bottom:12%;font-size:9px} .touchOnly{display:none} /* A 960x460 pitch in a portrait phone is a letterbox. Say so once, over the pitch, rather than letting people conclude the game is just small. */ .rotateHint{ display:none;position:absolute;left:50%;top:8px;transform:translateX(-50%); background:rgba(12,18,44,.82);border:1px solid rgba(232,238,242,.25); color:var(--chalk);border-radius:999px;padding:6px 14px; font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;white-space:nowrap;pointer-events:none; } @media (pointer:coarse) and (orientation:portrait){ body[data-screen="match"] .rotateHint{display:block} } @media (pointer:coarse){ body[data-screen="match"] .touchpad{display:block} .touchOnly{display:inline} /* Two players on one keyboard needs a keyboard. On a touch device the button leads to a game that cannot be played, so it is not offered. */ #btnTwo{display:none} /* A match on a phone is the game, and nothing else. * * This is the actual fix for "it accidentally scrolls up". On a landscape * phone the masthead, the coffee button, the nav and the scoreboard used up * the whole viewport, so the pitch started below the fold and you HAD to * scroll to play. Any stray touch then moved the page. With everything else * out of the way there is nothing to scroll to, and nothing to scroll. */ body[data-screen="match"]{overscroll-behavior:none;overflow:hidden} body[data-screen="match"] .lockup, body[data-screen="match"] .contact, body[data-screen="match"] footer{display:none} body[data-screen="match"] .wrap{ padding:0;gap:0;height:100dvh;max-width:none;justify-content:flex-start; } /* 100dvh, not 100vh: dvh follows the browser's chrome as it comes and goes, so the pitch uses the height actually visible instead of assuming a bar that may or may not be there. */ body[data-screen="match"] .cabinet{ touch-action:none;border:0;border-radius:0;padding:0;gap:0; height:100dvh;position:relative;display:block; } /* The scoreboard shrinks to a single strip so the pitch gets the room. */ /* The score floats OVER the pitch rather than taking a slice of the height. On a phone in landscape the browser's own chrome already eats most of the screen, and spending another 60px on a strip left the pitch a letterbox. Translucent, fading out, and never taking a touch, so the ball stays visible through it. */ body[data-screen="match"] .board2{ position:absolute;z-index:5; top:var(--safe-t); /* --stageL/R are the pitch's own edges, set by fitStage. Anchoring to the screen put the score in the bezel on a home-screen app, where env() reports nothing to inset by and both ends were clipped. */ left:var(--stageL, calc(var(--safe-l) + var(--edge))); right:var(--stageR, calc(var(--safe-r) + var(--edge))); padding:4px 56px 16px 76px;border:0;border-radius:0;flex:none; background:linear-gradient(180deg,rgba(8,12,34,.78),rgba(8,12,34,0)); pointer-events:none; } body[data-screen="match"] .board2 .score{font-size:22px} body[data-screen="match"] .board2 .meta{font-size:9px} /* HEIGHT drives the size here, not width. With width:100% the canvas kept its 960x460 ratio and came out taller than the space left over, which put 21px of the pitch below the fold and made the page scrollable again — the very thing this is meant to stop. Fit the height, letterbox the sides. */ /* Kept inside the SAFE AREA, so the notch, the Dynamic Island and the home indicator never sit on the pitch. * * viewport-fit=cover draws the page edge to edge, under the bezel and the * rounded corners — which is what put the left thumbstick behind the island * on an iPhone in landscape and clipped the sides of the play area. env() * reports how much of each edge is unusable; the wrapper simply does not go * there, plus a little extra, because a control pressed right on a rounded * corner is awkward even when technically visible. * * Read through variables so the layout can be exercised without an iPhone. */ body[data-screen="match"]{ --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --edge: 6px; } /* Horizontally only. The side insets are real — the Dynamic Island is a hole in the screen and the rounded corners genuinely clip — but the bottom inset is the home indicator, a thin translucent pill you can see straight through. Deducting it cost 10% of the pitch height on a phone with the address bar showing, for nothing. The CONTROLS keep off it instead, which is all it was ever protecting. */ body[data-screen="match"] .pitchWrap{ position:absolute; left: calc(var(--safe-l) + var(--edge)); right: calc(var(--safe-r) + var(--edge)); top: var(--safe-t); bottom: 0; width:auto;height:auto; } /* Reports the home indicator's height to fitStage. Reading env() from script is not possible directly; measuring a box that is one is. */ .safeProbe{ position:absolute;left:0;bottom:0;width:0;height:var(--safe-b,0px); pointer-events:none; } /* Absolutely positioned, and that detail is the whole trick. * * In normal flow `height:100%` on this canvas did nothing at all: the flex * item above it has no definite height for a percentage to resolve against, * so the width won and the ratio produced a canvas 42px taller than the * space it had — which put the page back to being scrollable. Measured: * height:100% gave 740x355, height:313px gave 653x313. * * An absolutely positioned box resolves percentages against its containing * block's padding box, which IS definite. inset:0 with margin:auto then * centres what is left over. */ /* Size and position come from JavaScript (fitStage), not from here. * * Three CSS attempts got this wrong in three different ways. width:100% * made the canvas taller than the space. height:100% with max-width made it * WIDER than the screen and cut a goal off — 448px lost on a tablet. Adding * max-height then stretched it out of shape completely, 390x731 on a phone * in portrait, because a replaced element only recomputes height from its * ratio when height is auto, and here it was not. * * Fitting a fixed ratio inside a box is four lines of arithmetic. Doing it * in script is exact, works the same on every screen, and re-runs on * rotation. */ body[data-screen="match"] #pitch{ position:absolute;aspect-ratio:auto;border-radius:0;border:0; } /* Quit stays reachable; the rest of the bar is desktop clutter on a phone. */ body[data-screen="match"] .matchbar{ position:absolute;z-index:6;gap:6px; top:calc(var(--safe-t) + 4px); left:calc(var(--stageL, calc(var(--safe-l) + var(--edge))) + 8px); } body[data-screen="match"] .matchbar #matchHint, body[data-screen="match"] .matchbar .touchOnly, body[data-screen="match"] .matchbar .spacer, body[data-screen="match"] .matchbar #btnMusic2, body[data-screen="match"] .matchbar #btnSound2{display:none} } /* Full screen takes the whole CABINET, not just the pitch. * * Making the pitch alone fullscreen left the scoreboard behind on the page * that was now hidden, so the score disappeared exactly when you could least * afford to lose it. It also fought the script that sizes the canvas, and the * result was a white screen rather than a game. * * With the cabinet fullscreen the score comes too — floated over the top of * the pitch, translucent, so the ball is still visible through it. */ /* Prefixed to out-weigh `body[data-screen="match"] .cabinet`, which is one specificity point higher than a bare `.cabinet:fullscreen` and would have kept its own height and flex layout right through going fullscreen. */ body[data-screen="match"] .cabinet:fullscreen, body[data-screen="match"] .cabinet:-webkit-full-screen, .cabinet:fullscreen,.cabinet:-webkit-full-screen{ position:relative;width:100vw;height:100vh; background:var(--night);padding:0;border:0;border-radius:0;gap:0;display:block; } .cabinet:fullscreen::backdrop{background:var(--night)} body[data-screen="match"] .cabinet:fullscreen .board2, .cabinet:fullscreen .board2,.cabinet:-webkit-full-screen .board2{ position:absolute;top:0;left:0;right:0;z-index:5; background:linear-gradient(180deg,rgba(8,12,34,.72),rgba(8,12,34,0)); border:0;border-radius:0;padding:6px 14px 18px; pointer-events:none; /* never in the way of a touch */ } body[data-screen="match"] .cabinet:fullscreen .pitchWrap, .cabinet:fullscreen .pitchWrap,.cabinet:-webkit-full-screen .pitchWrap{ position:absolute;width:auto;height:auto; left: calc(var(--safe-l, 0px) + var(--edge, 0px)); right: calc(var(--safe-r, 0px) + var(--edge, 0px)); top:0;bottom:0; } body[data-screen="match"] .cabinet:fullscreen .matchbar, .cabinet:fullscreen .matchbar,.cabinet:-webkit-full-screen .matchbar{ position:absolute;top:6px;left:10px;z-index:6; } /* ---------- result modal ---------- */ .modal{position:fixed;inset:0;background:rgba(6,9,26,0.78);display:grid;place-items:center; padding:20px;z-index:20} .modal[hidden]{display:none} /* the display rule above would beat [hidden] */ .modalCard{background:var(--panel);border:1px solid var(--line);border-radius:18px; padding:28px 32px;text-align:center;max-width:420px;width:100%; box-shadow:0 40px 90px -40px #000} .resultHead{font-family:"Anton",sans-serif;font-size:40px;line-height:1;letter-spacing:0.02em; text-transform:uppercase} .resultHead.win{color:var(--good)} .resultHead.loss{color:var(--bad)} .resultHead.draw{color:var(--mist)} .resultScore{font-family:"Anton",sans-serif;font-size:30px;margin-top:8px; font-variant-numeric:tabular-nums} .resultDelta{font-family:"DM Mono",monospace;font-size:15px;margin-top:10px;min-height:22px} .resultDelta .up{color:var(--good)} .resultDelta .down{color:var(--bad)} .modalActions{margin-top:18px;display:flex;justify-content:center;gap:10px} footer{color:var(--mist);font-size:13px;max-width:70ch;border-top:1px solid var(--line); padding-top:16px} footer b{color:var(--chalk);font-weight:700} @media (prefers-reduced-motion:reduce){ .spinner{animation:none} *{transition-duration:0.001ms !important} } /* ---------- play-on-this-device card ---------- */ .group{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .group .label{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:0.16em; text-transform:uppercase;color:var(--mist);min-width:64px} .seg{display:flex;background:#0D1433;border:1px solid var(--line);border-radius:9px; padding:3px;gap:3px} .seg button{appearance:none;border:0;background:transparent;color:var(--mist); font-family:"Chivo",sans-serif;font-weight:700;font-size:12px;letter-spacing:0.06em; text-transform:uppercase;padding:6px 11px;border-radius:6px;cursor:pointer; transition:background .15s ease,color .15s ease} .seg button:hover{color:var(--chalk)} .seg button[aria-pressed="true"]{background:var(--amber);color:#151007} .hereButtons{display:flex;gap:10px;flex-wrap:wrap} .hereButtons .btn{flex:1;min-width:150px} /* ---------- narrow screens ---------- */ @media (max-width:560px){ /* names matter more than ratings: on a phone the 1fr columns squeezed the names to zero width and left only the numbers visible */ .team .elo{display:none} /* The nowrap mode line was expanding the centre column and squeezing the names to nothing. Drop it onto its own row so the names get the full width. */ .board2{padding:9px 12px 11px;column-gap:8px;row-gap:5px; grid-template-columns:1fr auto 1fr} .tally{display:contents} .team.t1{grid-column:1;grid-row:1} .score{grid-column:2;grid-row:1} .team.t2{grid-column:3;grid-row:1} .meta{grid-column:1/-1;grid-row:2;justify-content:center} .team .name{letter-spacing:0.08em} .meta{font-size:10px;letter-spacing:0.06em;gap:6px} .matchbar .spacer{display:none} .matchbar #matchHint{order:3;flex-basis:100%} .record{grid-template-columns:repeat(2,1fr)} } /* ---------- rebindable keycaps ---------- */ .bindGroup{display:flex;flex-direction:column;gap:7px} .bindGroup .label{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:0.16em; text-transform:uppercase;color:var(--mist)} .binds{gap:6px 8px} .kbd{ font-family:"DM Mono",ui-monospace,monospace;font-size:13px; min-width:40px;height:36px;padding:0 10px; display:inline-flex;align-items:center;justify-content:center; background:#0D1433;color:var(--chalk); border:1px solid var(--line);border-bottom-width:3px;border-radius:8px; cursor:pointer;transition:border-color .14s ease,color .14s ease,background .14s ease; } .kbd:hover{border-color:var(--mist)} .kbd[data-capturing="true"]{background:var(--amber);color:#151007;border-color:var(--amber); animation:blink 1s steps(2,end) infinite} .kbd[data-unset="true"]{color:var(--mist);border-style:dashed} @keyframes blink{50%{opacity:.55}} .row .cap{font-size:12px;color:var(--mist);letter-spacing:0.04em} .card.controls .btn{align-self:flex-start} #mStage{color:var(--mist)} /* ---------- top nav ---------- */ .nav{display:flex;gap:6px;margin-left:auto;padding-bottom:4px} .navBtn{ appearance:none;cursor:pointer;font-family:"Chivo",sans-serif;font-weight:900; font-size:11px;letter-spacing:0.14em;text-transform:uppercase; padding:8px 15px;border-radius:9px; background:transparent;color:var(--mist);border:1px solid var(--line); } a.navBtn{text-decoration:none;display:inline-block;line-height:1.3} .navBtn:hover{color:var(--chalk);border-color:var(--mist)} .navBtn[aria-pressed="true"]{background:var(--amber);color:#151007;border-color:var(--amber)} body[data-screen="theatre"] .theatre{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:start} .card.gotw,.card.feed{grid-column:1/-1} /* ---------- goal of the week ---------- */ .gotwHead{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between} .weekNav{display:flex;align-items:center;gap:8px} .weekLabel{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:0.1em; text-transform:uppercase;color:var(--mist);white-space:nowrap} .podium{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .podium li{display:flex;align-items:center;gap:12px;padding:10px 12px; background:#0D1433;border:1px solid var(--line);border-radius:11px} .podium li:first-child{border-color:var(--amber);background:rgba(247,197,72,0.07)} .rankNo{font-family:"Anton",sans-serif;font-size:22px;color:var(--mist);min-width:26px; text-align:center} .podium li:first-child .rankNo{color:var(--amber)} /* ---------- clip rows ---------- */ .clipList{display:flex;flex-direction:column;gap:8px} .clipRow{display:flex;align-items:center;gap:12px;padding:10px 12px; background:#0D1433;border:1px solid var(--line);border-radius:11px} .clipFlag{width:34px;height:20px;flex:none;border-radius:3px} .clipText{flex:1;min-width:0} .clipTitle{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .clipMeta{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:0.07em; color:var(--mist);text-transform:uppercase} .clipActions{display:flex;gap:8px;align-items:center;flex:none} .voteBtn{ appearance:none;cursor:pointer;display:flex;align-items:center;gap:6px; font-family:"DM Mono",monospace;font-size:12px; padding:7px 11px;border-radius:9px; background:#141C40;color:var(--mist);border:1px solid var(--line); } .voteBtn:hover{color:var(--chalk);border-color:var(--mist)} .voteBtn[aria-pressed="true"]{background:var(--amber);color:#151007;border-color:var(--amber)} .voteBtn:disabled{opacity:.45;cursor:not-allowed} .voteBtn .arrow{font-size:11px} /* ---------- viewer ---------- */ .viewer .viewerCard{ background:var(--panel);border:1px solid var(--line);border-radius:18px; padding:16px;max-width:1000px;width:100%;display:flex;flex-direction:column;gap:10px; box-shadow:0 40px 90px -40px #000;max-height:94vh;overflow:auto; } .viewerHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .viewerTitle{font-family:"Anton",sans-serif;font-size:22px;letter-spacing:0.02em} #viewerCanvas{display:block;width:100%;height:auto;aspect-ratio:960/460; border-radius:12px;background:var(--sky);border:1px solid var(--line)} .transport{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .transport input[type=range]{flex:1;min-width:140px;accent-color:var(--amber)} .viewerTime{font-family:"DM Mono",monospace;font-size:12px;color:var(--mist); min-width:44px;text-align:right} .seg.small button{padding:5px 9px;font-size:11px} .goalStrip{display:flex;flex-wrap:wrap;gap:6px} .goalChip{ appearance:none;cursor:pointer;font-family:"DM Mono",monospace;font-size:11px; padding:6px 10px;border-radius:8px;background:#0D1433;color:var(--mist); border:1px solid var(--line); } .goalChip:hover{color:var(--chalk);border-color:var(--mist)} .goalChip.amber{color:var(--amber)} .goalChip.violet{color:var(--violet)} .goalChip.postable{border-color:var(--amber);color:var(--amber)} /* ---------- custom rooms ---------- */ .btn.big.custom .bigLabel{color:var(--good)} .btn.big.custom:hover{border-color:var(--good)} .roomCode{display:flex;align-items:baseline;gap:10px;margin-bottom:10px} .roomCode strong{font-family:"Anton",sans-serif;font-size:30px;letter-spacing:0.14em; color:var(--amber)} .roomShare{display:flex;gap:8px;margin-bottom:10px} .roomShare input{flex:1;min-width:0;font-family:"DM Mono",monospace;font-size:11.5px; font-weight:400;padding:8px 10px} .roomPlayers{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px} .roomPlayers li{display:flex;align-items:center;gap:9px;padding:8px 10px; background:#0D1433;border:1px solid var(--line);border-radius:9px;font-size:13px} .roomPlayers li.waiting{color:var(--mist);font-style:italic} .roomActions{display:flex;gap:8px;flex-wrap:wrap} .joinRow{display:flex;gap:8px;margin-top:10px} .joinRow input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:0.18em; font-family:"DM Mono",monospace} /* ---------- goal of the week table ---------- */ /* placement lives with the lobby grid near the top of this file */ .gotwTable td{vertical-align:middle} .gotwTable .kitCell canvas{width:34px;height:20px;display:block;border-radius:3px} .medal,.trophy{width:22px;height:22px;display:block} .expandBtn{ appearance:none;cursor:pointer;background:transparent;border:1px solid var(--line); color:var(--mist);border-radius:8px;padding:5px 10px; font-family:"DM Mono",monospace;font-size:11px;white-space:nowrap; } .expandBtn:hover{color:var(--chalk);border-color:var(--mist)} .expandBtn[aria-expanded="true"]{background:var(--amber);color:#151007;border-color:var(--amber)} .clipCell{padding:0 !important} .clipCell > div{padding:10px 10px 14px} .inlineClip{width:100%;max-width:620px;display:block;border-radius:10px; border:1px solid var(--line);background:var(--sky);aspect-ratio:960/460} .inlineBar{display:flex;align-items:center;gap:10px;margin-top:8px} .gotwTable tr.clipRowOpen{background:rgba(247,197,72,0.05)} .ladderIcon{display:flex;align-items:center;gap:6px} /* ---------- compact goal of the week ---------- */ .card.gotwMain{gap:10px} .gotwTable{font-size:12.5px} .gotwTable th{padding:0 8px 6px;font-size:9px} .gotwTable td{padding:6px 8px} .gotwTable .medal{width:19px;height:19px} .gotwTable .kitCell canvas{width:28px;height:17px} .gotwTable .expandBtn{padding:4px 9px;font-size:10.5px} .gotwTable .voteBtn{padding:4px 8px;font-size:11px;gap:5px} .card.gotwMain .gotwHead h2{margin:0} .inlineClip{max-width:100%} /* ---------- ladder pager ---------- */ .pager{display:flex;align-items:center;gap:10px} .pageLabel{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:0.08em; text-transform:uppercase;color:var(--mist);white-space:nowrap} .gotwTable .votesCell{font-family:"DM Mono",monospace;color:var(--amber);font-size:13px} /* ---------- past weeks ---------- */ .weekHead{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:0.14em; text-transform:uppercase;color:var(--mist);margin:10px 0 2px} .weekHead:first-child{margin-top:0} .card.past .clipRow .medal{width:22px;height:22px} /* ---------- rank block, under the stat tiles ---------- */ .rankBox{ display:flex;align-items:center;justify-content:space-between;gap:12px; background:#0D1433;border:1px solid var(--line);border-radius:10px; padding:10px 14px; } .rankLabel{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:0.16em; text-transform:uppercase;color:var(--mist)} .rankValue{font-family:"Anton",sans-serif;font-size:30px;line-height:1; color:var(--amber);font-variant-numeric:tabular-nums} .rankValue.none{color:var(--mist);font-size:26px;letter-spacing:0.04em} /* ---------- pagers: arrows at the edges, label centred ---------- */ .pager{display:flex;align-items:center;gap:10px;justify-content:space-between} .pager[hidden]{display:none} /* the display rule above would beat [hidden] */ .pager .pageLabel{ flex:1;text-align:center;color:var(--chalk);font-size:12px;letter-spacing:0.1em; } .pager .btn.pagePrev,.pager .btn.pageNext{ flex:none;color:var(--chalk);border-color:var(--mist); font-size:11.5px;padding:8px 14px; } .pager .btn.pagePrev:hover:not(:disabled), .pager .btn.pageNext:hover:not(:disabled){ background:var(--amber);color:#151007;border-color:var(--amber); } .pager .btn:disabled{opacity:.3;border-color:var(--line);color:var(--mist)} /* The controls card lines up with the board beside it, but an expanding clip must not drag it taller — the client pins its height while one is open. */ .card.controls.pinned{align-self:start} .feedRank{font-family:"Anton",sans-serif;font-size:16px;color:var(--mist); min-width:22px;text-align:center;flex:none} /* ---------- stale-server banner ---------- */ .staleBanner{ display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px; background:rgba(251,113,133,0.12);border-bottom:1px solid var(--bad); color:var(--chalk);padding:10px 16px;font-size:13px; } .staleBanner[hidden]{display:none} .staleBanner strong{color:var(--bad)} .staleBanner code{font-family:"DM Mono",monospace;font-size:12px; background:#0D1433;border:1px solid var(--line);border-radius:5px;padding:1px 6px} /* ---------- your slime: fill the card rather than bunching at the top ---------- */ .card.identity{justify-content:flex-start} #signedIn, #signedOut{ display:flex;flex-direction:column;gap:14px; flex:1; /* take the card's spare height ... */ } #signedIn{justify-content:space-between} /* ... and spread into it */ .me{gap:14px} .meName{font-size:30px} .meRating{font-size:14px} /* the stat tiles and the rank block share one column, same edges */ .identityStats{display:flex;flex-direction:column;gap:10px} .record{gap:10px} .record div{padding:12px 4px} .record dt{font-size:9.5px} .record dd{font-size:22px} .rankBox{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; padding:16px 14px;border-radius:12px; } .rankLabel{font-size:10.5px;letter-spacing:0.2em} .rankValue{font-size:46px;line-height:0.95} .rankValue.none{font-size:38px;letter-spacing:0.06em} .identityFoot{display:flex;flex-direction:column;gap:10px} /* ---------- signed-out: what a name unlocks ---------- */ .signedOutLead{margin:0;font-size:16px;font-weight:700;color:var(--chalk)} .unlocks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px} .unlocks li{ position:relative;padding-left:22px;font-size:14px;color:var(--chalk);line-height:1.4; } .unlocks li::before{ content:"";position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:3px; background:var(--amber); } /* ---------- the highlight reel ---------- */ .card.reel{grid-column:1/-1} .reelHead{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .reelHead h2{margin:0} .reelPos{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:0.12em; text-transform:uppercase;color:var(--mist)} .reelStage{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line)} #reelCanvas{display:block;width:100%;height:auto;aspect-ratio:960/460;background:var(--sky)} .reelOverlay{ position:absolute;left:0;right:0;bottom:0; display:flex;align-items:center;gap:14px;padding:14px 16px; background:linear-gradient(180deg,rgba(6,9,26,0) 0%,rgba(6,9,26,0.86) 60%); pointer-events:none; } .reelFlag{width:56px;height:33px;flex:none;border-radius:4px; box-shadow:0 2px 10px rgba(0,0,0,0.5)} .reelWho{min-width:0} .reelName{font-family:"Anton",sans-serif;font-size:26px;line-height:1;letter-spacing:0.02em} .reelMeta{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:0.06em; color:var(--mist);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .reelNav{ position:absolute;top:50%;transform:translateY(-50%); width:44px;height:64px;border-radius:10px;cursor:pointer; background:rgba(6,9,26,0.55);border:1px solid var(--line);color:var(--chalk); font-size:20px;line-height:1; } .reelNav:hover{background:var(--amber);color:#151007;border-color:var(--amber)} .reelNav.prev{left:10px} .reelNav.next{right:10px} .reelBar{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .likeBtn{ appearance:none;cursor:pointer;display:flex;align-items:center;gap:9px; font-family:"Chivo",sans-serif;font-weight:900;font-size:15px; padding:11px 20px;border-radius:11px; background:#0D1433;color:var(--chalk);border:1px solid var(--line); transition:background .15s ease,border-color .15s ease,color .15s ease; } .likeBtn .heart{font-size:17px;color:var(--bad)} .likeBtn:hover:not(:disabled){border-color:var(--bad)} .likeBtn[aria-pressed="true"]{background:var(--bad);color:#2A0510;border-color:var(--bad)} .likeBtn[aria-pressed="true"] .heart{color:#2A0510} .likeBtn:disabled{opacity:.5;cursor:not-allowed} @media (max-width:640px){ .reelNav{width:38px;height:52px} .reelName{font-size:20px} .reelMeta{font-size:10px} } .reelDone{display:flex;flex-direction:column;align-items:center;gap:10px; padding:30px 16px;text-align:center;background:#0D1433; border:1px solid var(--line);border-radius:12px} .reelDoneLead{margin:0;font-family:"Anton",sans-serif;font-size:24px;letter-spacing:0.02em} /* ---------------------------------------------------------------- * * The coffee button, wedged between the status readout and the nav. * Buy Me a Coffee injects an of its own size, so the job * here is to stop it dictating the height of the whole header. * ---------------------------------------------------------------- */ /* Coffee button and nav as one right-hand block. */ .headerEnd{ margin-left:auto;display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap; } .coffee{ display:flex;align-items:center; padding-bottom:4px; min-height:1px; /* nothing to see if the script is blocked */ max-height:44px;overflow:hidden; /* their stylesheet can never grow the header */ } /* BMC builds an holding an inline SVG and a span, and ships it at 60px tall — which is nearly twice the nav and would set the height of the whole header. Everything below is sized back to match the nav buttons beside it. Their stylesheet uses !important, so this has to. */ .coffee .bmc-btn-container,.coffee #bmc-wbtn{ position:static !important;margin:0 !important; height:35px !important;width:auto !important; } .coffee .bmc-btn{ height:35px !important;min-width:0 !important;width:auto !important; padding:0 14px !important;margin:0 !important; line-height:35px !important;font-size:19px !important; border-radius:9px !important;box-shadow:none !important; display:inline-flex !important;align-items:center !important; text-decoration:none; } .coffee .bmc-btn svg,.coffee .bmc-btn img{ height:19px !important;width:19px !important; margin:0 7px 0 0 !important;flex:none; } .coffee .bmc-btn-text{ font-size:19px !important;line-height:35px !important;margin:0 !important; } /* Shown only when the widget never loads. Styled as one of our own buttons so a blocked script degrades to something that still looks deliberate. */ .coffeeFallback{ font:700 12px/1 var(--ui);letter-spacing:.02em; padding:9px 12px;border-radius:8px; background:#FFDD00;color:#151007;border:1px solid #000; text-decoration:none;white-space:nowrap; } .coffeeFallback:hover{filter:brightness(1.06)} /* The nav no longer needs to claim the free space — .coffee does it. */ .nav{margin-left:0} @media (max-width:720px){ /* On a phone the pair sits left, under the status line, rather than being squeezed against the right edge. */ .headerEnd{margin-left:0;width:100%} .coffee{padding-bottom:0} } .footLinks{display:block;margin-top:10px} .footLinks a{color:var(--mist)} .footLinks a:hover{color:var(--amber)} /* ---------------------------------------------------------------- * * Standalone pages (privacy). Reuses the card, adds a reading width. * ---------------------------------------------------------------- */ body[data-screen="page"] .prose{display:block;max-width:70ch;margin:0 auto;width:100%;padding:26px 30px} .prose h2{margin:0 0 2px} .prose h3{ font-family:"DM Mono",monospace;font-size:11px;font-weight:500; letter-spacing:0.14em;text-transform:uppercase; color:var(--amber);margin:30px 0 8px; } .prose p,.prose li{color:var(--mist);font-size:14.5px;line-height:1.7} .prose ul{margin:8px 0 0;padding-left:20px} .prose li{margin-bottom:7px} .prose strong{color:var(--chalk);font-weight:700} .prose code,.prose .mono{ font-family:"DM Mono",monospace;font-size:12.5px;color:var(--chalk); background:rgba(255,255,255,.05);padding:1px 5px;border-radius:4px; } .prose a{color:var(--amber)} .prose .contactBlock{ border-left:3px solid var(--amber);padding:12px 16px;margin:12px 0; background:rgba(247,197,72,.08);border-radius:0 8px 8px 0; font-family:"DM Mono",monospace;font-size:14px; } .prose .contactBlock a{color:var(--amber);text-decoration:none} .prose .contactBlock a:hover{text-decoration:underline} body[data-screen="page"] footer{text-align:center} body[data-screen="page"] footer a{color:var(--mist)} body[data-screen="page"] footer a:hover{color:var(--amber)} /* ---------------------------------------------------------------- * * Get in touch. Sits under the boards, above the footer. * ---------------------------------------------------------------- */ .contact{gap:16px} .contactGrid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; } @media (max-width:820px){.contactGrid{grid-template-columns:1fr;gap:22px}} .contactItem{display:flex;flex-direction:column;align-items:flex-start;gap:8px} .contactItem h3{ margin:0;font-family:"DM Mono",monospace;font-size:10px;font-weight:500; letter-spacing:0.16em;text-transform:uppercase;color:var(--amber); } .contactItem p{margin:0;color:var(--mist);font-size:13px;line-height:1.55} /* The email column carries two addresses; only the first paragraph should stretch, or the two pairs drift apart from each other. */ .contactItem > p:first-of-type{flex:1} .contactItem .contactSecond{margin-top:12px;flex:none} .contactEmail,.contactLink{ font-family:"DM Mono",monospace;font-size:13px;color:var(--chalk); text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px; overflow-wrap:anywhere; /* not break-all: keep the domain whole */ } .contactEmail:hover,.contactLink:hover{color:var(--amber);border-color:var(--amber)} /* Discord keeps its own blurple; it is the one colour people recognise. */ .discordBtn{ display:inline-flex;align-items:center;gap:9px; background:#5865F2;color:#fff;border:1px solid #5865F2; padding:10px 16px;text-decoration:none;width:auto; } .discordBtn svg{width:19px;height:auto;flex:none} .discordBtn:hover{background:#4752C4;border-color:#4752C4} /* Until there is an invite to point at. */ .discordBtn.disabled{ background:transparent;color:var(--mist);border:1px dashed var(--line); cursor:not-allowed;pointer-events:none; } footer .footLinks a{color:var(--mist);text-decoration:none} footer .footLinks a:hover{color:var(--amber)} footer .footLinks .sep{opacity:.4;margin:0 8px} .contactItem .inlineMail{ color:var(--mist);text-decoration:none;border-bottom:1px solid var(--line); overflow-wrap:anywhere; } .contactItem .inlineMail:hover{color:var(--amber);border-color:var(--amber)} /* Playing unclaimed looks exactly like being signed in once a match starts. */ .guestWarn{color:var(--amber);margin-top:6px} /* ---------- embedded in someone else's page ---------- * * A portal wraps the game in its own site. Ours is then a page inside a page, * and everything that is not the game is noise competing with their chrome. * The status line, the coffee button, the footer and the long explanations go; * the game and the lobby stay. */ body[data-embed="1"] .coffee, body[data-embed="1"] footer, body[data-embed="1"] .lockup .status, body[data-embed="1"] .card.contact{display:none} body[data-embed="1"] .wrap{padding-top:10px;gap:14px} body[data-embed="1"] .lockup{margin-bottom:0} body[data-embed="1"] .mark{font-size:26px} /* Their page is the frame, so the game should use all of it rather than leaving a margin inside a margin. */ body[data-embed="1"] .cabinet{margin-top:0} .embedBadge{ position:fixed;right:8px;bottom:8px;z-index:30; font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.1em; text-transform:uppercase;text-decoration:none; color:var(--mist);background:rgba(8,12,34,.72); border:1px solid var(--line);border-radius:999px;padding:5px 11px; } .embedBadge:hover{color:var(--chalk);border-color:var(--mist)} /* Never over the pitch during a match — the controls are down there now. */ body[data-screen="match"] .embedBadge{display:none}