/* The homepage is one social product: the Arbiter, ship, fleet and factions use the same blue-black surfaces and cyan interaction language as the feed. */ .socialFront{--front-deck:clamp(440px,calc(100vh - 292px),610px);--front-deck:clamp(440px,calc(100svh - 292px),610px);--front-dock:clamp(140px,15vh,156px);--front-dock:clamp(140px,15svh,156px)} .socialFront .axPanel,.socialFront .axBoard{border-color:rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(11,17,28,.98),rgba(6,11,19,.98));box-shadow:0 24px 70px rgba(0,0,0,.44),inset 0 1px rgba(255,255,255,.035)} .socialFront .axHead{border-bottom-color:rgba(255,255,255,.1);background:rgba(8,13,22,.94)} .socialFront .axLive{background:var(--cyan);box-shadow:0 0 11px rgba(73,220,255,.75)} .socialFront .axBuild{border-left-color:rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(73,220,255,.065),rgba(7,12,20,.08))} .socialFront .axHead strong,.socialFront .axDare strong,.socialFront .axFacName{color:#f4f7fb} .socialFront .axDare strong em,.socialFront .axScore span,.socialFront .axMass,.socialFront .axFacScore{color:var(--cyan)} .socialFront .axDare span,.socialFront .axHint,.socialFront .axThesis b,.socialFront .axBoardHead,.socialFront .axColHead,.socialFront .axRank,.socialFront .axBoardEmpty,.socialFront .axFacBlurb,.socialFront .axFacSize,.socialFront .axFacNote,.socialFront .axMusterMsg,.socialFront .axShipName{color:#8290a5} .socialFront .axThesis{color:#b7c4d5} .socialFront .axForm{border-top-color:rgba(255,255,255,.09);background:rgba(4,8,14,.38)} .socialFront .axForm textarea{color:#f4f7fb;border-color:rgba(255,255,255,.14);background:#080d16} .socialFront .axForm textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(73,220,255,.1)} .socialFront .axForm button,.socialFront .axHeadDoor.axLaunch{color:#071017;border-color:transparent;background:linear-gradient(135deg,var(--cyan),#8fe7c0);box-shadow:none} .socialFront .axChip{color:#bfeef7;border-color:rgba(73,220,255,.27);background:rgba(73,220,255,.055)} .socialFront .axChip:hover{background:rgba(73,220,255,.13)} .socialFront .axRecent{border-bottom-color:rgba(255,255,255,.08)} .socialFront .axRecentHead{color:#8fe7c0} .socialFront .axRecentList li{color:#c5cfdd;background:rgba(73,220,255,.055)} .socialFront .axRecentList li:hover{background:rgba(73,220,255,.11)} .socialFront .axRecentList li.me,.socialFront .axBoardList li.me{color:#fff;background:rgba(162,117,255,.13)} .socialFront .axAttack span,.socialFront .axBoardCount{color:#8290a5} .socialFront .axBoardList li:hover,.socialFront .axFacList li{background:rgba(255,255,255,.035)} .socialFront .axFacList li{border-color:rgba(255,255,255,.075)} .socialFront .axBoardList::-webkit-scrollbar-thumb,.socialFront .axFacList::-webkit-scrollbar-thumb{background:rgba(73,220,255,.28)} .socialFront .axBoardList{scrollbar-color:rgba(73,220,255,.28) transparent} .socialFront .axFacHead a,.socialFront .axFacNote a{color:var(--cyan)} .socialFront .axMuster{color:var(--cyan);border-color:rgba(73,220,255,.38);background:rgba(73,220,255,.075)} .socialFront .axMuster:hover{background:rgba(73,220,255,.15)} .socialFront .axAddBtn{color:var(--cyan);border-color:rgba(73,220,255,.38)} .socialFront .axAddBtn:hover{background:rgba(73,220,255,.09)} .socialFront .axAddGo{color:#071017;background:var(--cyan)} .socialFront .axContext{border-bottom-color:rgba(73,220,255,.18);background:linear-gradient(90deg,rgba(73,220,255,.12),rgba(162,117,255,.055))} .socialFront .axContext span{color:var(--cyan)} .socialFront>.gameDock{height:var(--front-dock);min-height:var(--front-dock);overflow:hidden} .socialFront .gameDockIntro,.socialFront .gameDockTrack,.socialFront .dockGame{height:100%;min-height:0} .socialFront .gameDockIntro{overflow:hidden} .socialFront>.gameDockProof{min-height:29px;margin:0;padding-top:3px;align-self:start} .socialFront .gameDockActions{display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px;margin-top:9px} .socialFront .gameDockActions .gameDockAll{margin:0} .socialFront .gameTickerToggle{min-height:23px;padding:0 7px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#9da8b9;background:rgba(255,255,255,.035);font:850 7.5px/1 inherit;cursor:pointer} .socialFront .gameTickerToggle:hover,.socialFront .gameTickerToggle:focus-visible,.socialFront .gameTickerToggle[aria-pressed="true"]{color:#fff;border-color:rgba(73,220,255,.45);background:rgba(73,220,255,.09)} .socialFront .gameDockTrack{--ticker-gap:clamp(7px,.8vw,11px);position:relative;display:block;min-width:0;overflow:hidden;border-radius:15px;mask-image:linear-gradient(90deg,transparent,#000 1.4%,#000 98.6%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 1.4%,#000 98.6%,transparent)} .socialFront .gameTickerMover{display:flex;width:max-content;height:100%;will-change:transform} .socialFront .gameTickerMover.isReady{animation:gameTickerMove 116s linear infinite} .socialFront .gameTickerSet{display:flex;flex:none;height:100%;gap:var(--ticker-gap);padding-right:var(--ticker-gap)} .socialFront .gameDockTrack:hover .gameTickerMover,.socialFront .gameDockTrack:focus-within .gameTickerMover,.socialFront .gameDockTrack:active .gameTickerMover,.socialFront .gameTickerMover.isPaused{animation-play-state:paused} .socialFront .dockGame{flex:0 0 clamp(250px,25vw,355px);scroll-snap-align:none} @keyframes gameTickerMove{to{transform:translate3d(-50%,0,0)}} /* A real, in-feed composer: type first, choose richer post metadata only when replying through the expanded composer. */ .agoraInlineComposer{width:calc(100% - 28px);min-height:98px;display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px 11px;margin:13px 14px;padding:12px;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:rgba(255,255,255,.035)} .agoraInlineComposer .agoraComposerIcon{grid-row:1/3;align-self:start} .agoraInlineComposer textarea{width:100%;min-height:48px;max-height:120px;resize:none;overflow-y:auto;padding:6px 2px;border:0;outline:0;color:#fff;background:transparent;font:650 14px/1.45 inherit} .agoraInlineComposer textarea::placeholder{color:#8290a5} .agoraInlineComposer:focus-within{border-color:rgba(73,220,255,.48);background:rgba(73,220,255,.055);box-shadow:0 0 0 3px rgba(73,220,255,.08)} .agoraInlineActions{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:7px;border-top:1px solid rgba(255,255,255,.075)} .agoraInlineCount{color:#748196;font-size:8px;font-weight:800} .agoraInlinePublish{min-height:30px;padding:0 13px;border:0;border-radius:999px;color:#061017;background:var(--cyan);font:950 9px/1 inherit;cursor:pointer} .agoraInlinePublish:disabled{cursor:wait;filter:grayscale(1);opacity:.55} @media(max-width:980px){.socialFront>.gameDock{height:auto;min-height:0;overflow:visible}.socialFront .gameDockIntro,.socialFront .gameDockTrack{height:auto}.socialFront .gameDockTrack{display:block;overflow:hidden;padding:0}.socialFront .dockGame{height:132px;flex-basis:min(245px,34vw)}.socialFront>.gameDockProof{margin:0;padding-top:3px}} @media(max-width:760px){.agoraInlineComposer{width:calc(100% - 20px);margin:10px}} @media(max-width:620px){.socialFront .gameDockActions{justify-self:end;flex-wrap:nowrap;margin:0}.socialFront .gameTickerToggle{min-height:23px;padding:0 6px;font-size:7px}.socialFront .gameDockTrack{margin-right:-12px;padding-right:12px}.socialFront .dockGame{height:122px;flex-basis:min(74vw,282px)}} @media(max-width:460px){.agoraInlineComposer{grid-template-columns:36px minmax(0,1fr);padding:10px}.agoraInlineComposer .agoraComposerIcon{width:36px;height:36px}} @media(prefers-reduced-motion:reduce){.socialFront .gameTickerMover{animation:none}.socialFront .gameTickerSet[aria-hidden="true"]{display:none}.socialFront .gameDockTrack{overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:thin;mask-image:none;-webkit-mask-image:none}.socialFront .dockGame{scroll-snap-align:start}.socialFront .gameTickerToggle{display:none}} /* The passport: your Plaza character at the Asha Arena door. Gold sits on the chip itself, never behind a click, because it is the number every wager on this site is measured against. */ .passport{position:relative;flex:0 0 auto} .passport[hidden]{display:none} .ppCarry,.ppToggle{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:5px 11px;border:1px solid rgba(232,185,80,.42);border-radius:11px;color:#ffe3a8;background:linear-gradient(145deg,rgba(232,185,80,.15),rgba(255,122,61,.07));font:inherit;font-size:11px;font-weight:900;white-space:nowrap;cursor:pointer;transition:transform .16s,border-color .16s,background .16s} .ppToggle{padding-left:6px} .ppCarry:hover,.ppCarry:focus-visible,.ppToggle:hover,.ppToggle:focus-visible,.ppToggle[aria-expanded=true]{transform:translateY(-2px);border-color:#e8b950;background:linear-gradient(145deg,rgba(232,185,80,.26),rgba(255,122,61,.13))} .ppDisc{display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border:1px solid hsl(var(--pp-hue,42) 70% 62%/.75);border-radius:50%;color:hsl(var(--pp-hue,42) 85% 86%);background:hsl(var(--pp-hue,42) 55% 24%);font-size:11px;font-weight:950} .ppDiscBig{flex-basis:38px;width:38px;height:38px;font-size:15px} .ppWho{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.15} .ppName{max-width:120px;overflow:hidden;color:#fff;font-size:11px;text-overflow:ellipsis;white-space:nowrap} .ppGold{color:#e8b950;font-size:10px;font-weight:900;letter-spacing:.03em} .ppMenu{position:absolute;z-index:80;top:calc(100% + 9px);right:0;width:min(300px,calc(100vw - 24px));padding:12px;border:1px solid rgba(232,185,80,.28);border-radius:14px;background:linear-gradient(155deg,#1d1708,#0b0a06);box-shadow:0 24px 70px rgba(0,0,0,.72)} .ppMenu[hidden]{display:none} .ppHead{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.09)} .ppHeadCopy{display:flex;min-width:0;flex-direction:column} .ppHeadCopy strong{overflow:hidden;color:#fff;font-size:14px;text-overflow:ellipsis;white-space:nowrap} .ppHeadCopy small{color:#a99b7c;font-size:9px;letter-spacing:.06em;text-transform:uppercase} .ppRow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 0;font-size:11px} .ppRowLabel{color:#a99b7c;font-size:9px;font-weight:900;letter-spacing:.09em;text-transform:uppercase} .ppRowValue{color:#f0ead9;font-size:12px;font-weight:800} .ppGoldRow .ppRowValue{color:#e8b950;font-size:15px} .ppLink,.ppSignOut{display:block;width:100%;margin-top:7px;padding:9px 10px;border:1px solid rgba(255,255,255,.13);border-radius:10px;color:#f0ead9;background:rgba(255,255,255,.04);font:inherit;font-size:11px;font-weight:800;text-align:center;text-decoration:none;cursor:pointer} .ppLink:hover,.ppLink:focus-visible,.ppSignOut:hover,.ppSignOut:focus-visible{border-color:rgba(232,185,80,.55);background:rgba(232,185,80,.1)} .ppWarn{border-color:rgba(232,185,80,.5);color:#ffe3a8} @media(max-width:760px){.ppWho{display:none}.ppToggle{padding:3px;justify-content:center;width:34px;min-height:34px}.ppMenu{position:fixed;top:60px;right:10px;width:min(300px,calc(100vw - 20px))}} @media(prefers-reduced-motion:reduce){.ppCarry,.ppToggle{transition:none}.ppCarry:hover,.ppToggle:hover{transform:none}} /* The board: what is being argued, at the top of the front door. Two faults in the first version, both measured rather than guessed: OVERFLOW. Grid and flex items default to min-width:auto, so a long claim could not shrink and pushed the whole .socialFront grid wider than the window: 157px of horizontal scroll at 1440. Every box from the section down to the topic now carries min-width:0, which is the only thing that lets text wrap inside a grid track. HEIGHT. Eleven full-width cards came to 1294px and pushed the game dock, the best-looking thing on the page, entirely below the fold. The board leads the page; it does not get to BE the page. So: fewer rows, two columns of them on a wide screen, and a denser row. */ .socialFront>.board{grid-column:1/-1;grid-row:1;min-width:0} .socialFront>.gameDock{grid-row:2} .socialFront>.gameDockProof{grid-row:3} .socialFront>.agora{grid-row:4} .socialFront>.hero{grid-row:4} .board{margin:0 0 14px;padding:15px 17px;border:1px solid rgba(232,185,80,.3);border-radius:18px;background:radial-gradient(600px 200px at 0% 0%,rgba(232,185,80,.1),transparent),rgba(4,8,14,.5)} .board[hidden]{display:none} .bdHead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px} .bdTitle{margin:0;font-size:clamp(22px,2.6vw,32px);line-height:1;letter-spacing:-.04em} .bdSub{margin:0;color:#aab3c5;font-size:12px} .bdCompose{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(8,12,20,.6);min-width:0} .bdClaim{width:100%;min-width:0;padding:10px 12px;border:1px solid rgba(255,255,255,.14);border-radius:10px;outline:0;color:#fff;background:#0a101a;font-family:Georgia,serif;font-size:15px} .bdClaim:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,202,99,.12)} .bdComposeRow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0} .bdSidePick{display:flex;gap:5px} .bdSideBtn{padding:6px 10px;border:1px solid rgba(255,255,255,.15);border-radius:8px;color:#c8d2e0;background:transparent;font:inherit;font-size:10.5px;font-weight:900;cursor:pointer} .bdSideBtn.on{border-color:var(--gold);color:var(--gold);background:rgba(255,202,99,.12)} .bdHandleWrap{display:flex;align-items:center;gap:6px;color:#8492a5;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase} .bdHandle{width:120px;padding:5px 8px;border:1px solid rgba(255,255,255,.14);border-radius:8px;color:#fff;background:#0a101a;font:inherit;font-size:11.5px;text-transform:none;letter-spacing:0} .bdPost{margin-left:auto;padding:8px 14px;border:0;border-radius:9px;color:#171008;background:linear-gradient(180deg,#ffe08a,#ffb642);font:inherit;font-size:11.5px;font-weight:950;cursor:pointer} .bdPost:disabled{filter:grayscale(1);opacity:.55} .bdFlash{color:var(--gold);font-size:11px} /* Two columns of claims on a wide screen: the same rows at half the height. */ .bdList{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:8px;min-width:0} .bdRow{min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:rgba(8,12,20,.55);transition:border-color .16s,transform .16s} .bdRow:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.2)} .bdRow.bdOpen{border-color:rgba(255,202,99,.45);background:linear-gradient(150deg,rgba(255,202,99,.08),rgba(8,12,20,.55))} /* Two lines, then an ellipsis. A claim is a headline here, not the argument. */ .bdTopic{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0;color:#f2f5fa;font-family:Georgia,serif;font-size:15.5px;line-height:1.32;overflow-wrap:anywhere;text-decoration:none} .bdTopic:hover{color:var(--gold)} .bdSides{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;margin-top:7px} .bdSide{display:flex;align-items:baseline;gap:6px;min-width:0} .bdSideTag{flex:none;color:#7b889a;font-size:8.5px;font-weight:900;letter-spacing:.1em} .bd-pro .bdSideTag{color:#73e5a4} .bd-con .bdSideTag{color:#ff9b8a} .bdName{overflow:hidden;min-width:0;color:#dde5f0;font-size:12px;text-overflow:ellipsis;white-space:nowrap} .bdTake{flex:none;padding:3px 9px;border:1px solid rgba(255,202,99,.5);border-radius:7px;color:var(--gold);font-size:10.5px;font-weight:900;text-decoration:none;white-space:nowrap} .bdTake:hover{color:#171008;background:var(--gold)} .bdVs{flex:none;color:#5d6a7d;font-size:9.5px;font-style:italic} .bdMarks{display:flex;gap:5px;flex-wrap:wrap;min-width:0;margin-top:7px} .bdMark,.bdPot{padding:2px 7px;border-radius:20px;background:rgba(255,255,255,.06);color:#aab3c5;font-size:9.5px;font-weight:800} .bdPot{color:#171008;background:linear-gradient(135deg,var(--gold),#ff9f43)} .bdOrdeal{color:#cbb2ff;background:rgba(162,117,255,.14)} .bdSpar{opacity:.65} .bdMore{display:inline-block;margin-top:11px;color:var(--gold);font-size:11.5px;font-weight:900;text-decoration:none} .bdMore:hover{text-decoration:underline} @media(max-width:560px){.board{padding:13px}.bdPost{margin-left:0;width:100%}.bdList{grid-template-columns:1fr}} /* The Codex's door in the primary nav. Gold like the Music link, because it is a place rather than a section of this page: the other plain nav item is an anchor down the front door and this one leaves it. It belongs in a nav that was just trimmed "to the arena", because the Codex is the arena's record. Here rather than in index.html because this sheet costs that file no bytes. */ .navcodex{color:var(--gold);font-weight:900} /* ⚠ THE HEADER DID NOT FIT AT ALMOST ANY LAPTOP WIDTH, BEFORE THIS LINK EXISTED. Measured on this branch: the brand runs 537px and the nav 479px, so the topbar reached 1278px inside a 1024px viewport and dragged a horizontal scrollbar across the whole page from 1440px all the way down. Trimming the nav helped and could not be enough, because roughly half the brand is the promise line, which is decorative and was only ever hidden at 620px. So it is kept only where there is actually room for it. That single line closes the overflow outright from 1120px to 1920px, WITH the new link in place. Before -> after, page overflow in px: 1366 22 -> 0 1300 86 -> 0 1281 105 -> 0 1200 83 -> 0 1120 161 -> 0 1024 254 -> 0 900 219 -> 0 768 347 -> 88 768 and 390 still overflow and are deliberately NOT fixed here: closing those means dropping a nav item, which is a call about what this header is for. */ @media(max-width:1535px){.brandPromise{display:none}} /* And the link stands down below the width where the header measurably fits with it in place, so it can never be the thing that reintroduces the scrollbar. Below that, this page's own board and the world's doors still reach the Codex, so nothing becomes unreachable. */ @media(max-width:1119px){.navcodex{display:none}} /* ⚠ THE HEADER STILL DID NOT FIT A PHONE. Reclaiming the brand promise below 1280px closed every laptop width, and left the narrow end untouched: at 390px the bar still ran 73px past the edge, at 360px 103px. Measured, the whole nav at that size is three items: Music 52px, the passport button 152px, and Browse Games 123px, beside a 60px mark in a ~366px box. No amount of shrinking fits all four, so one has to go. MUSIC GOES, AND IT MOVES RATHER THAN DISAPPEARING. It was the ONLY link to /music/ anywhere on this page, so hiding it here would have made the music unreachable on a phone; it is now in the footer, where secondary destinations belong, and nothing has been removed from the site. Browse Games is the primary call to action and the passport is the whole cross-property identity hop, so neither was a candidate. Page overflow, before -> after: 414 49 -> 0, 390 73 -> 0, 360 103 -> 4, 320 149 -> 6. What is left at 360 and 320 is NOT this header: it is div.gameDockTrack running 4px wide, which is the ticker's own problem. */ @media(max-width:480px){ .nav{gap:6px} .navmusic{display:none} .navpartner,.navplay{font-size:10px;padding:7px 9px} /* The arrow is decoration next to a label this small. */ .navplay span{display:none} .ppCarry{font-size:10px;padding:7px 9px} } /* The narrowest phones still in use. Nothing else is hidden here; it is the same header, squeezed, and it takes a 320px screen from 46px of overflow down to the ticker's 6. */ @media(max-width:380px){ .shell{padding:0 8px 40px} .topbar{gap:6px} .nav{gap:4px} .brandmark{width:48px;height:33px} .navpartner,.navplay,.ppCarry{padding:6px 7px;font-size:9.5px} } /* ⚠ THE LAST 4px WAS MINE, NOT THE TICKER'S. The dock track bleeds to the screen edge with margin-right:-12px plus a matching 12px of padding, which lands exactly on the edge while .shell pads by 12px. The rule above cut that padding to 8px on the narrowest phones to buy the header room, and did not tell the ticker, so it overshot by exactly the 4px difference and kept a scrollbar on the whole page. The bleed has to equal the padding it is bleeding through. */ @media(max-width:380px){ .socialFront .gameDockTrack{margin-right:-8px;padding-right:8px} } /* And the last squeeze, for a 320px screen. Nothing is hidden that was not already: it is the same two nav items, tighter. Page overflow is now 0 at every width from 320 to 1920. */ @media(max-width:340px){ .nav{gap:3px} .navpartner,.navplay,.ppCarry{padding:6px;font-size:9px} .brandmark{width:42px;height:29px} }