/* Konto-drawern: en enda källa för både landningen (statisk HTML) och spelsidorna (React-SPA:n). Reglerna är FLYTTADE hit ur public/_landing/styles.css, inte omskrivna — samma deklarationer i samma inbördes ordning. Filen laddas direkt efter styles.css på landningen, så kaskaden är oförändrad: ingen kvarvarande regel i styles.css matchar drawerns noder med samma specificitet. Bevis: samma prob mot den körande landningen före och efter, 430 och 1440, öppen och stängd. Ägs av src-agent. Ändras den här ändras BÅDA sidorna — det är hela poängen. */ /* Ur den delade :focus-visible-gruppen på styles.css:719. De tre rail-selektorerna ligger kvar där; bara drawerns två flyttade med, med identiska deklarationer. */ .menu-backdrop:focus-visible { outline: 2px solid #6cd2e8; outline-offset: 5px; } /* Stängknappens ring är NEUTRAL, inte cyan. Skälet är inte smak: open() anropar closeButton.focus(), och webbläsaren räknar den programmatiska fokuseringen som :focus-visible — så den cyana ringen syntes på VARJE öppning, även med mus. Cyanen är reserverad för aktiv-markeringen på rälsens kontobricka (produktägaren 2026-09-05), och två cyana ringar samtidigt sa inte vilken som betydde något. Ringen tas inte bort: en tangentbordsanvändare måste fortfarande se var fokus står. */ .account-drawer-close:focus-visible { outline: 2px solid rgb(255 255 255 / 0.55); outline-offset: 5px; } .menu-backdrop { position: fixed; z-index: 20; inset: 0; visibility: hidden; margin: 0; padding: 0; border: 0; background: rgb(0 0 0 / 0.68); opacity: 0; transition: opacity 240ms ease, visibility 0s linear 240ms; cursor: pointer; } .menu-backdrop.is-open { visibility: visible; opacity: 1; transition-delay: 0s; } .account-drawer { position: fixed; z-index: 21; top: 0; bottom: 0; left: 0; display: flex; visibility: hidden; width: min(390px, 88vw); flex-direction: column; overflow-y: auto; padding: 26px 24px 24px; border-right: 1px solid rgb(255 255 255 / 0.11); background: radial-gradient(circle at 0 0, rgb(108 210 232 / 0.11), transparent 34%), linear-gradient(145deg, #171717 0%, #050505 72%); box-shadow: 28px 0 80px rgb(0 0 0 / 0.48); transform: translateX(-102%); transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 280ms; } .account-drawer.is-open { visibility: visible; transform: translateX(0); transition-delay: 0s; } .account-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid rgb(255 255 255 / 0.13); } .account-drawer-header p { margin: 0; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: 1.2px; line-height: 1; } .account-drawer-close { position: relative; width: 44px; height: 44px; flex: 0 0 44px; margin: 0; padding: 0; border: 1px solid rgb(255 255 255 / 0.17); border-radius: 50%; background: rgb(255 255 255 / 0.04); cursor: pointer; } .account-drawer-close span { position: absolute; top: 50%; left: 50%; display: block; width: 19px; height: 2px; border-radius: 2px; background: #fff; } .account-drawer-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); } .account-drawer-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); } .account-menu-list { margin: 0; padding: 12px 0 0; list-style: none; } .account-menu-item { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgb(255 255 255 / 0.09); color: #f2efe6; font-size: 15px; font-weight: 700; letter-spacing: 1.1px; line-height: 1.2; } .account-menu-item i { color: #6cd2e8; font-family: "Big Shoulders Display", "Arial Narrow", sans-serif; font-size: 30px; font-style: normal; font-weight: 800; line-height: 1; } .more-menu-list { padding-top: 8px; } .more-menu-item { min-height: 66px; } .more-menu-link { display: flex; width: 100%; min-height: 66px; align-items: center; justify-content: space-between; gap: 16px; color: inherit; text-decoration: none; } .more-menu-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; } .more-menu-copy strong { color: #f2efe6; font-size: 15px; font-weight: 700; letter-spacing: 1.1px; line-height: 1.2; } .more-menu-copy small { color: rgb(255 255 255 / 0.48); font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif; font-size: 11.5px; font-weight: 500; letter-spacing: 0; line-height: 1.25; } .more-menu-link:focus-visible { outline: 2px solid #6cd2e8; outline-offset: -2px; } /* Ralsens tva rutter bor i menyn overallt UTOM pa riktigt stora skarmar. Fran 1608 px breda OCH 561 px hoga ligger How to och Hall of Fame kvar som brickor i ikonralsen, och da vore raderna en dubblett. Provkorning 2026-09-06; talet var 561 innan. VILLKORET AR DET EXAKTA KOMPLEMENTET till ralsens, som ar `(max-width: 1607px), (max-height: 560px)` i public/_landing/styles.css. En kommaseparerad lista ar ELLER, sa dess negation ar OCH — darav `and` har. Skriver man `min-width: 1608px` ensamt forsvinner rutterna HELT i ett brett men lagt fonster: ralsen doljer brickorna pa hojdvillkoret medan menyn doljer raderna pa breddvillkoret. Andras den ena maste den andra folja, annars finns rutterna antingen pa bada stallena eller pa inget. `display: none` och inte bara visuell doljning: raderna ska inte heller na tangentbordet. Drawerns setTabbable() satter tabindex pa varje a[href] nar panelen oppnas, men ett element utan layoutbox gar anda inte att fokusera, sa fokusfallan hoppar over dem. De ligger dessutom mitt i listan — forsta fokuserbara ar stangkrysset och sista ar PRIVACY POLICY — sa fokusfallans forsta/sista aldrig pekar pa en dold rad. */ @media (min-width: 1608px) and (min-height: 561px) { .more-menu-item--rail { display: none; } } /* DE TVA BRICKORNA HOGST UPP I MORE. Produktagarens begaran 2026-09-07: How to play och Hall of Fame ska ligga bredvid varandra med sina egna loggor sa man ser att de ar sarskilda. FORMEN AR RALSENS, en niva ner. De tva ar samma destinationer som brickorna i ikonralsen och bar samma tva SVG-filer — men har som en kant utan fyllning i stallet for rälsens solida svarta, for panelen ligger redan pa en morkare yta och en svart platta pa svart hade forsvunnit. Radie 12 och kant vit .12 ar panelens egna tal, samma som raderna under. Ikonen far EXPLICITA matt. `.site-how-to-icon` finns i landningens CSS men galler bara i ralsen, och `hall-of-fame.svg` har ingen storleksregel nagonstans alls — utan de har tva raderna hade den ritats i sin egen naturliga storlek och de tva brickorna blivit olika. */ .more-tiles { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 18px; gap: 10px; } .more-tile { display: grid; min-height: 96px; align-content: center; justify-items: center; padding: 11px 8px 15px; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 12px; color: inherit; text-decoration: none; } .more-tile:hover { border-color: rgb(255 255 255 / 0.24); background: rgb(255 255 255 / 0.05); } .more-tile:focus-visible { outline: 2px solid #6cd2e8; outline-offset: 2px; } /* IKONPLATSEN AR LIKA HOG I BADA BRICKORNA, den RITADE storleken skiljer. Hojden 62 ar ett fack, inte ett matt: med `object-fit: contain` ritas markeet sa stort det far plats inom BADA maten, och for how-to ar bredden 36 den som begransar — den blir alltsa 36x36, centrerad i ett 62 hogt fack. Bada facken ar lika hoga, sa etiketterna under hamnar pa samma rad. Utan det gemensamma facket satt texterna olika hogt sa fort de tva markena fick olika storlek — produktagarens iakttagelse 2026-09-07, direkt efter att Hall of Fame gick till 62. */ .more-tile-icon { width: 36px; height: 62px; object-fit: contain; } /* Hall of Fame-market ar storre for att det INNEHALLER MER: how-to.svg ar ett enda tecken ("HOW TO?"), medan hall-of-fame.svg bar en stjarna plus tva ord i sin viewBox. Vid samma pixelmatt blir den senare optiskt mindre trots att rutan ar lika stor. Bada viewBoxarna ar naramast kvadratiska (36.67x36.13 respektive 153.1x150.9), sa skillnaden sitter i innehallet och inte i formatet — darfor ett eget tal och inte en gemensam justering. Selektorn gar pa href for att det ar den som ar markets identitet har. */ .more-tile[href="/hall-of-fame"] .more-tile-icon { width: 62px; } .more-tile-label { color: rgb(255 255 255 / 0.7); font-family: var(--font-jetbrains), "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 1px; line-height: 1.2; text-align: center; text-transform: uppercase; } /* ===== DESKTOP: ett side sheet bredvid rälsen, inte en drawer i kanten ===== Produktägarens riktning 2026-09-05: panelen ska uppfattas som ett modernt account side sheet ovanpå landningen. Den börjar EFTER ikonrälsen så rälsen alltid är synlig, och ligger fritt med egen kant, radie och skugga i stället för att vara ankrad i skärmkanten. ARKET ÄR DETSAMMA PÅ BÅDA RUTTERNA — produktägaren 2026-09-05: "identisk helt enkelt fast utan dom fyra ikonerna". Bara vänsterkanten skiljer, och den skiljer av ett skäl som syns: på landningen står ikonrälsen där, på spelsidan gör den inte det. Sheetet börjar alltså 16 px in som standard — samma insteg som rälsen själv har — och skjuts till 127 först när rälsen faktiskt finns i dokumentet. `body:has(.site-controls)` frågar därför efter det den beror på i stället för att gissa rutt. 127 px = rälsens `left: 16` + brickans 95 + 16 px luft. Ändras brickans mått i styles.css punkt 5 ska talet räknas om — det finns ingen gemensam variabel, för de två filerna laddas oberoende av varandra. Brytpunkten är 840 och inte 561: vid 561 hade 127 + 420 lämnat 14 px till höger om arket. 840 är landningens egen gräns där kortgriden går två-i-bredd, alltså där layouten faktiskt är desktop. Under den behåller drawern sitt kantankrade läge, oförändrat — på båda rutterna, för på en telefon är ett fritt flytande ark bara tappad bredd. */ @media (min-width: 840px) { .account-drawer { top: 16px; bottom: 16px; left: 16px; width: 420px; border: 1px solid rgb(255 255 255 / 0.11); border-radius: 18px; box-shadow: 0 30px 90px rgb(0 0 0 / 0.55); /* UTGÅNGEN ÄR EN TONING, INTE EN UTGLIDNING — och skälet är mätt, inte smakat. Arket är 420 brett men reste 428 px (translateX(-102%)), alltså LÄNGRE än sin egen bredd. Lådan gick därmed från [127, 547] när den var öppen till [-301, 119] när den var stängd, och rälsen ligger på [16, 111]: arket la sig alltså ÖVER de fyra ikonerna på väg ut och blev kvar där tills `visibility` slog om vid 280 ms — då kom de tillbaka i ett hopp. Produktägaren såg blinket 2026-09-05. Glidningen var ett arv från drawermodellen, där arket satt i skärmkanten och hade något att glida ut ur. Ett indraget ark har inte det. Nu tonar det i stället, med en 12 px nudge: stängt läge blir [115, 535], vilket är 4 px till höger om rälsens kant — arket rör aldrig ikonerna, i något läge. Under 840 px behåller drawern kantankringen OCH utglidningen: där sitter den i kanten, och där finns ingen räls bredvid att glida över. */ opacity: 0; transform: translateX(-12px); transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease, visibility 0s linear 240ms; } .account-drawer.is-open { opacity: 1; transform: translateX(0); } body:has(.site-controls) .account-drawer { left: 127px; } } /* Ur @media (max-width: 560px) på styles.css:1769 */ @media (max-width: 560px) { .account-drawer { /* Taket höjt 340 → 380 (provkörning 2026-09-06). `min()` gör höjningen ofarlig för smala telefoner: 90vw-halvan binder på allt under 422px bred skärm, så bara Pro Max-klassen (428/430) ändras alls. Rör INTE 90vw — den halvan är marginalen, och den krymper på varje telefon samtidigt. */ width: min(380px, 90vw); padding: 20px 20px 18px; } } /* Ur @media (prefers-reduced-motion: reduce) på styles.css:1819 */ @media (prefers-reduced-motion: reduce) { .menu-backdrop, .account-drawer { transition-duration: 1ms; } } /* Tillagd har, inte flyttad: sign-in-slotten. Tom pa landningen, som saknar auth — :empty haller den utan hojd sa landningen renderar exakt som forut. SPA:n portalerar sin SignInBox/AccountBox hit. */ .account-drawer-slot:empty { display: none; } .account-drawer-slot { margin-bottom: 22px; } /* Kontoikonen fore rubriken. Samma tecken som spelsidans kontoknapp, sa drawern och knappen som oppnar den bar samma symbol. Headern ar space-between med tva barn; ikonen ar ett tredje, sa rubriken far margin-right auto och trycker stangknappen till hogerkanten som forut. Ikonen visas BARA for kontopanelen — data-panel sätts av modulens open(), och med MORE-panelen oppen byter rubriken text och ikonen hor inte langre till den. */ .account-drawer-icon { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; color: #fff; } .account-drawer-icon svg { width: 24px; height: 24px; fill: none; stroke: currentcolor; stroke-width: 1.7; stroke-linecap: round; } .account-drawer-header p { margin-right: auto; } /* KONTOPANELEN HAR INGEN LINJE UNDER RUBRIKEN. Produktagarens skisser 2026-09-06 satter statusraden (SIGNED IN / NOT SIGNED IN) tatt under MY ACCOUNT som ett block, och en regel mellan dem hade delat det i tva. MORE-panelen behaller sin linje: dar ar rubriken en rubrik over en lista, inte forsta raden i ett stycke. Det ar den enda andringen har som inte ar ren omflyttning — flaggat till produktagaren. */ .account-drawer[data-panel="account"] .account-drawer-header { padding-bottom: 0; border-bottom: 0; } /* MORE-panelen tappar ocksa linjen. Den beholls medvetet nar kontopanelens togs bort — dar var rubriken en rubrik over en lista — men sedan de tva brickorna flyttade hogst upp 2026-09-07 star linjen tatt ovanfor en kant, och tva vagrata streck med 18 px emellan laser som en ruta som inte finns. Produktagarens iakttagelse. */ .account-drawer[data-panel="more"] .account-drawer-header { border-bottom: 0; } /* STANGKRYSSET SLUTAR BESTAMMA HEADERNS HOJD i kontopanelen. Krysset ar 44 px medan rubriken ar 20 och ikonen 26, sa headern blev 44 hog med 17 px dod luft under titeln. Statusraden ligger i innehallet UNDER headern och kunde darfor inte na upp — och den kunde inte heller dras upp, for innehallets wrapper ar en scrollyta som klipper vid headerns underkant (mattt, se src/fantasy/v6.css vid .signin-status). Negativa blockmarginaler pa knappen tar bort dess bidrag till radhojden utan att flytta den optiskt: 44 - 9 - 9 = 26, alltsa samma hojd som ikonen. Krysset ligger kvar centrerat mot rubriken och sticker ut 9 px at vardera hallet, dar det finns luft. */ .account-drawer[data-panel="account"] .account-drawer-close { margin-block: -9px; } .account-drawer[data-panel="more"] .account-drawer-icon { display: none; } /* Slotten och dess innehall stracker sig, sa det som ligger i den kan bottenankras. :empty-regeln ovan galler fortfarande: pa landningen ar slotten tom och tar ingen plats. */ .account-drawer-slot:not(:empty) { display: flex; flex: 1; flex-direction: column; /* margin-bottom: 22px satt ovan holl isar slotten fran kontomenyn som lag under. Menyn ar borta och slotten ar sista innehallet, sa marginalen blev 22 px dod luft under en bottenankrad Sign out. Matt: knappen slutade 40 px fran drawerns underkant, varav 18 ar drawerns egen padding. */ margin-bottom: 0; } /* Kontopanelen ar ett LED i flex-kedjan, inte bara en behallare. Drawern ar en 900 px hog flex-kolumn och slotten har flex:1 for att stracka sig hela vagen ned — det ar den strackningen som lagger SIGN OUT i botten. Nar slotten flyttades in i panelen blev panelen ett display:block mellan dem och kedjan gick av: slotten mätte 421 px i en 900 px drawer. :not([hidden]) ar INTE kosmetik. Ett display-varde pa ett element som doljs med hidden-attributet slar UA-regeln [hidden]{display:none} — utan guarden hade kontopanelen synts under MORE igen, alltsa exakt den lacka flytten just stangde. */ .account-drawer [data-drawer-panel="account"]:not([hidden]) { display: flex; min-width: 0; min-height: 0; flex: 1; flex-direction: column; } /* :not(style) — regeln galler LAYOUTBARN. Utan undantaget overtar den