/* ================================================================ Drawblins marketing styles - "Sketchbook". The site is a blueprint desk: brand blue with a faint white grid, and sheets of paper laid on top. Panels get a 3px ink border and a hard offset shadow (no blur), which is what makes them read as pen-on-paper rather than as material cards. Text sits on ONE of two surfaces and the colour differs: directly on the blue it is white, on a paper sheet (.alt, .prose, .gcard) it is ink. When adding a section, decide which surface it is on first. Doodles use the #rough SVG filter defined in each page's . Deliberately a SEPARATE file from the game client: play.html is one self-contained document on purpose (it is the app), while these are ordinary content pages that should share one cacheable stylesheet. CACHE: the server sends max-age=86400 for CSS. Bump the ?v= query in every HTML file when you edit this, or you will test a stale copy and conclude your change did nothing. ================================================================ */ :root{ --blue:#3d59a5; --blue-deep:#25376b; --paper:#fbf6ea; --paper-2:#fff; --grid:rgba(255,255,255,.07); --ink:#22304f; --pencil:#4a5a7d; --muted:#7d88a6; --faint:#c3cade; --red:#e64539; --orange:#f77622; --yellow:#f7d63c; --green:#4ec24a; --dgreen:#2f8d2c; --cyan:#2ce8f5; --sky:#4a9bf2; --purple:#9a5fe0; --pink:#e05fb0; --line:#e6eaf5; --ring:0 0 0 3px #fff, 0 0 0 6px var(--yellow); } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif; color:#fff; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; background-color:var(--blue); background-image:linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px), radial-gradient(1200px 760px at 50% 0%,rgba(255,255,255,.10),transparent 62%); background-size:26px 26px, 26px 26px, 100% 900px; background-attachment:scroll, scroll, fixed;} img{max-width:100%;} a{text-decoration:none; color:inherit;} /* kills the 300ms double-tap delay; the highlight is set rather than left to each browser's default, which on Android flashed a grey block over cards. */ a,button,summary{touch-action:manipulation; -webkit-tap-highlight-color:rgba(34,48,79,.14);} /* Every focusable thing gets the same visible ring. :focus-visible so a mouse click does not leave a ring behind, which is the usual reason people reach for outline:none and break keyboard users. */ a:focus-visible,button:focus-visible,summary:focus-visible{outline:none; box-shadow:var(--ring); border-radius:8px;} /* Keyboard users land here first and can jump the nav. */ .skip{position:absolute; left:-9999px; top:0; z-index:60; background:var(--yellow); color:var(--ink); font-weight:900; padding:12px 20px; border:3px solid var(--ink); border-radius:0 0 12px 0;} .skip:focus{left:0;} h1,h2,h3,h4{text-wrap:balance; letter-spacing:-.8px;} [id]{scroll-margin-top:84px;} /* roughens straight edges so drawn shapes look hand-made */ .rough{filter:url(#rough);} /* ---------------- nav ---------------- The game links are the point of this bar, so on a phone they stay on ONE horizontally scrollable row rather than wrapping. Wrapping looked fine but grew the bar to ~220px tall, which pushed the actual page below the fold. */ .nav{display:flex; align-items:center; gap:16px; padding:11px 26px; background:rgba(255,255,255,.95); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:3px solid var(--ink); position:sticky; top:0; z-index:40;} .brand{display:inline-flex; align-items:center; padding:10px 0; font-weight:900; font-size:24px; line-height:1; min-height:44px; box-sizing:border-box; user-select:none; white-space:nowrap; flex:0 0 auto; letter-spacing:-.6px;} /* overflow-x:auto here used to be load-bearing, because eleven links did not fit. With the games behind one control they do, and the scroll container was clipping the mega-menu popover - an overflow on ANY axis creates a clipping context for absolutely positioned descendants. The mobile panel restores it below, where the list is vertical and genuinely can need to scroll. */ .navlinks{display:flex; gap:4px; align-items:center; flex:1 1 auto; min-width:0;} .navlinks::-webkit-scrollbar{display:none;} .navlinks a{color:var(--pencil); font-weight:800; font-size:15px; padding:8px 14px; border-radius:10px; white-space:nowrap; display:inline-flex; align-items:center; min-height:44px; box-sizing:border-box; transition:background .15s ease, color .15s ease;} .navlinks a:hover{background:rgba(34,48,79,.07); color:var(--ink);} .navlinks a[aria-current="page"]{color:var(--ink); background:rgba(34,48,79,.09);} .navcta{background:var(--green); color:var(--ink); font-weight:900; font-size:14px; padding:10px 19px; border:3px solid var(--ink); border-radius:12px; box-shadow:3px 3px 0 var(--ink); white-space:nowrap; flex:0 0 auto; transition:transform .12s ease, box-shadow .12s ease;} .navcta:hover{transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink);} .navcta:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink);} /* ---------------- games mega-menu ---------------- The nav carried eleven top-level links, which only fitted by being cramped and started scrolling sideways below ~1150px - a scrolling nav hides its own contents. The eight games now live behind one control, which both fixes the crowding and gives someone who landed on a single game page a way to see the other seven. */ .navgroup{position:relative; flex:0 0 auto;} .navtop{display:inline-flex; align-items:center; gap:6px; background:none; border:0; font:inherit; color:var(--pencil); font-weight:800; font-size:15px; padding:8px 14px; border-radius:10px; cursor:pointer; min-height:44px; box-sizing:border-box; transition:background .15s ease, color .15s ease;} .navtop:hover{background:rgba(34,48,79,.07); color:var(--ink);} .navtop[aria-expanded="true"], .navtop.cur{color:var(--ink); background:rgba(34,48,79,.09);} .navtop .chev{font-size:9px; opacity:.55; transition:transform .18s ease;} .navtop[aria-expanded="true"] .chev{transform:rotate(180deg);} .mega{position:absolute; top:calc(100% + 9px); left:0; width:min(760px,88vw); background:#fff; border:3px solid var(--ink); border-radius:14px; padding:12px; display:none; grid-template-columns:repeat(4,1fr); gap:6px; box-shadow:0 14px 34px rgba(20,34,80,.22); z-index:60;} .mega.open{display:grid;} .mega a{display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:10px; color:var(--ink); font-weight:800; font-size:13px; line-height:1.25;} .mega a:hover{background:#f1f4fb;} .mega a[aria-current="page"]{background:#eef2fb;} .mega .ic{width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-size:15px; border:2px solid var(--ink); flex:0 0 auto;} .mega small{display:block; color:var(--pencil); font-weight:700; font-size:10.5px; margin-top:1px;} @media (max-width:900px){ /* Inside the hamburger panel the menu is already a list, so the mega stops being a popover and just renders inline - no nested disclosure to fight. */ .navgroup{width:100%;} .navtop{width:100%; justify-content:space-between; font-size:16px; padding:13px 14px; border-radius:10px;} .mega{position:static; width:auto; display:grid; grid-template-columns:1fr 1fr; border:0; box-shadow:none; padding:4px 0 8px; gap:4px;} .mega a{font-size:14px; min-height:44px;} .mega small{display:none;} } @media (max-width:420px){ .mega{grid-template-columns:1fr;} } /* ---------------- buttons ---------------- */ .btn-primary,.btn-ghost{display:inline-block; font-weight:900; font-size:18px; padding:16px 32px; border:3px solid var(--ink); border-radius:16px; box-shadow:5px 5px 0 var(--ink); transition:transform .12s ease, box-shadow .12s ease;} .btn-primary{background:var(--green); color:var(--ink);} .btn-ghost{background:var(--paper-2); color:var(--ink);} .btn-primary:hover,.btn-ghost:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink);} .btn-primary:active,.btn-ghost:active{transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink);} /* ---------------- hero (centred: used by the seven game pages) ---------------- */ .hero{position:relative; overflow:hidden; padding:52px 22px 54px; text-align:center;} .hero > *{position:relative; z-index:3;} .kicker{display:inline-flex; align-items:center; gap:9px; background:var(--yellow); color:var(--ink); font-weight:900; font-size:12.5px; letter-spacing:1.6px; text-transform:uppercase; padding:8px 17px; border:3px solid var(--ink); border-radius:100px; box-shadow:3px 3px 0 var(--ink); transform:rotate(-1.4deg);} .livedot{position:relative; width:8px; height:8px; border-radius:50%; background:var(--green); border:2px solid var(--ink); flex:0 0 auto;} .hero h1{font-size:clamp(34px,5.6vw,58px); font-weight:900; line-height:1.02; margin:22px auto 14px; max-width:900px; letter-spacing:-1.6px; color:#fff; text-shadow:0 3px 0 rgba(12,22,55,.28);} .hero .sub{font-size:18.5px; color:#dbe6ff; font-weight:700; max-width:620px; margin:0 auto 28px; text-wrap:pretty;} .herobtns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;} .trust{margin-top:22px; font-size:14.5px; color:#c3d3ff; font-weight:800;} /* hand-drawn ring around one word of a headline */ .ring{position:relative; display:inline-block; padding:0 10px;} .ring > svg{position:absolute; left:-8px; top:-12%; width:calc(100% + 16px); height:124%; overflow:visible;} .ring > span{position:relative;} /* margin doodles */ .doodle{position:absolute; pointer-events:none; z-index:1; animation:sway var(--t,7s) ease-in-out var(--dl,0s) infinite;} @keyframes sway{0%,100%{transform:translateY(0) rotate(-3deg);} 50%{transform:translateY(-14px) rotate(4deg);}} .d1{top:9%; left:4%; width:92px; --t:7s;} .d2{top:15%; right:5%; width:78px; --t:8.5s; --dl:.8s;} .d3{bottom:17%; left:8%; width:72px; --t:6.4s; --dl:1.6s;} .d4{bottom:9%; right:9%; width:100px; --t:9s; --dl:.4s;} /* ---------------- homepage hero ---------------- A separate modifier rather than overriding .hero, so a change here can never quietly reflow the seven game pages that use the centred version. */ .hero--home{padding-bottom:34px;} /* the taped-down drawing board */ .board{position:relative; max-width:640px; margin:44px auto 0; background:var(--paper-2); color:var(--ink); border:3px solid var(--ink); border-radius:16px; box-shadow:8px 8px 0 var(--ink); padding:22px 22px 26px; transform:rotate(-.8deg); z-index:3;} .tape{position:absolute; top:-15px; left:50%; margin-left:-52px; width:104px; height:28px; background:rgba(247,214,60,.85); border:2px solid rgba(34,48,79,.35); transform:rotate(-2deg);} .bhead{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;} .bword{font-weight:900; font-size:13px; letter-spacing:3px; color:var(--muted);} .bclock{font-weight:900; font-size:13px; background:var(--red); color:#fff; padding:4px 12px; border:2px solid var(--ink); border-radius:100px; font-variant-numeric:tabular-nums;} .sketch{position:relative; height:210px; display:grid; place-items:center; border-radius:10px; background-image:linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:22px 22px;} .sketch svg{height:196px;} .stroke{fill:none; stroke:var(--ink); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:ink 2.1s ease forwards var(--d,0s);} @keyframes ink{to{stroke-dashoffset:0;}} .stroke.fl{stroke:var(--orange);} .guess{position:absolute; font-weight:900; font-size:13.5px; padding:7px 14px; background:var(--paper-2); color:var(--ink); border:3px solid var(--ink); border-radius:100px; white-space:nowrap; opacity:0; box-shadow:3px 3px 0 var(--ink); animation:pop .5s cubic-bezier(.34,1.56,.64,1) forwards var(--d);} .guess.win{background:var(--green); color:var(--ink);} @keyframes pop{from{opacity:0; transform:translateY(10px) scale(.88);} to{opacity:1; transform:none;}} .q1{left:-4%; top:6%; rotate:-4deg;} .q2{right:-5%; top:36%; rotate:3deg;} .q3{left:6%; bottom:-6%; rotate:-2deg;} /* ---------------- ticker ---------------- */ .ticker{background:var(--ink); color:var(--paper); overflow:hidden; padding:12px 0; border-block:3px solid var(--ink);} .tk{display:flex; width:max-content; animation:slide 30s linear infinite; font-weight:900; font-size:15px; letter-spacing:1px; text-transform:uppercase;} .tk span{display:flex; align-items:center; gap:34px; white-space:nowrap; padding-right:34px;} @keyframes slide{from{transform:translateX(0);} to{transform:translateX(-50%);}} /* ---------------- stat strip ---------------- */ .stats{display:flex; justify-content:center; flex-wrap:wrap; gap:16px; background:var(--blue-deep); padding:44px 24px; border-block:3px solid var(--ink);} .stats div{background:#2c3c61; border:3px solid #46578a; border-radius:14px; padding:16px 32px; text-align:center; color:#fff; min-width:152px; transform:rotate(-1deg);} .stats div:nth-child(even){transform:rotate(1deg);} .stats b{display:block; font-size:34px; font-weight:900; letter-spacing:-1px; font-variant-numeric:tabular-nums;} .stats span{font-size:11.5px; font-weight:800; letter-spacing:1.4px; color:#a8b6d8; text-transform:uppercase;} /* ---------------- sections ---------------- */ .sec{max-width:1180px; margin:0 auto; padding:62px 24px;} .sec h2{font-size:clamp(28px,4.2vw,44px); font-weight:900; text-align:center; margin-bottom:10px; letter-spacing:-1.2px; color:#fff; text-shadow:0 3px 0 rgba(12,22,55,.24);} .lede{text-align:center; color:#cbd9ff; font-weight:700; max-width:580px; margin:0 auto 38px; font-size:16px; text-wrap:pretty;} /* A full-width sheet laid on the desk, so sections alternate surface. Anything inside it is back on paper and must use ink, not the white used on blue. */ .alt{background:var(--paper); color:var(--ink); border-block:3px solid var(--ink);} .alt h2{color:var(--ink); text-shadow:none;} .alt .lede{color:var(--pencil);} /* ---------------- game cards: taped paper notes ---------------- */ .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:26px;} .gcard{position:relative; background:var(--paper-2); color:var(--ink); border:3px solid var(--ink); border-radius:16px; padding:24px 22px 22px; box-shadow:6px 6px 0 var(--ink); display:block; transition:transform .16s ease, box-shadow .16s ease;} .gcard:nth-child(odd){transform:rotate(-.7deg);} .gcard:nth-child(even){transform:rotate(.7deg);} .gcard:hover{transform:rotate(0deg) translate(-3px,-4px); box-shadow:9px 10px 0 var(--ink);} /* the strip of tape holding the note down */ .gcard::before{content:""; position:absolute; top:-14px; left:22px; width:74px; height:24px; background:var(--c,var(--yellow)); border:2px solid var(--ink); transform:rotate(-3deg); opacity:.9;} .gcard .ic{font-size:38px; line-height:1; display:block;} .gcard h3{font-size:20px; font-weight:900; margin:10px 0 8px;} .gcard .meta{display:inline-block; font-size:10.5px; font-weight:900; letter-spacing:1.1px; color:var(--ink); background:var(--c,var(--yellow)); border:2px solid var(--ink); padding:4px 11px; border-radius:100px; margin-bottom:10px; line-height:1.35;} .gcard p{font-size:14.5px; color:var(--pencil); font-weight:700; min-height:62px;} .gcard .go{display:inline-block; margin-top:12px; font-weight:900; font-size:14px; color:var(--ink); border-bottom:3px solid var(--c,var(--yellow)); padding-bottom:1px;} .gcard.soon{opacity:.62; border-color:var(--faint); box-shadow:6px 6px 0 var(--faint); cursor:default;} .gcard.soon::before{display:none;} .gcard.soon:hover{transform:rotate(.7deg); box-shadow:6px 6px 0 var(--faint);} /* ---------------- feature / step grid ---------------- */ .wgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:24px;} .wgrid > div{background:var(--paper-2); color:var(--ink); border:3px solid var(--ink); border-radius:16px; padding:20px; box-shadow:5px 5px 0 var(--ink);} .wgrid > div:nth-child(even){transform:rotate(.6deg);} .wgrid > div:nth-child(odd){transform:rotate(-.6deg);} .wgrid .ic{font-size:30px; line-height:1;} .wgrid h4{font-size:17px; font-weight:900; margin:10px 0 6px;} .wgrid p{font-size:14.5px; color:var(--pencil); font-weight:700;} .wgrid .num{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:12px; background:var(--yellow); color:var(--ink); font-weight:900; font-size:17px; border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); font-variant-numeric:tabular-nums;} /* ---------------- article / game page body ---------------- */ .prose{max-width:820px; margin:40px auto; padding:38px 34px 30px; background:var(--paper); color:var(--ink); border:3px solid var(--ink); border-radius:18px; box-shadow:8px 8px 0 var(--ink);} .prose h2{font-size:27px; font-weight:900; margin:36px 0 10px;} .prose h3{font-size:19px; font-weight:900; margin:22px 0 6px;} .prose p{margin-bottom:14px; color:var(--pencil); font-weight:600;} .prose ul,.prose ol{margin:0 0 16px 22px;} .prose li{margin-bottom:7px; color:var(--pencil); font-weight:600;} .prose a{color:var(--ink); font-weight:800; border-bottom:3px solid var(--yellow);} .prose a:hover{background:rgba(247,214,60,.34);} .prose strong{color:var(--ink);} .callout{background:var(--paper-2); color:var(--ink); border:3px solid var(--ink); border-left-width:10px; border-radius:14px; box-shadow:5px 5px 0 var(--ink); padding:18px 20px; margin:26px 0;} .callout p:last-child{margin-bottom:0;} .playbar{text-align:center; padding:18px 22px 56px;} /* ---------------- guide pages (how-to-play, team-building) ---------------- These used to be a white card on a blue background with their own inline CSS. They now share this sheet, which needs the few extra elements they bring: a page h1, a back link, and scoring/comparison tables. */ .prose h1{font-size:clamp(30px,4.4vw,42px); font-weight:900; margin:6px 0 12px;} .prose .lede{text-align:left; margin:0 0 22px; max-width:none; font-size:18px; color:var(--pencil);} .back{display:inline-block; margin-bottom:16px; font-weight:900; color:var(--pencil); padding:6px 0; border-bottom:none;} .back:hover{color:var(--ink);} /* A table's min-content width can exceed a phone viewport, and a table cannot shrink past it - so it scrolls inside its own box instead of dragging the whole page sideways. The shadow lives on the wrapper so it is not clipped. */ .tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:16px 0 26px; border-radius:14px; box-shadow:5px 5px 0 var(--ink);} .prose table{width:100%; border-collapse:collapse; font-size:15px; margin:0; background:var(--paper-2); color:var(--ink); border:3px solid var(--ink); border-radius:14px; overflow:hidden; min-width:320px;} .prose th,.prose td{text-align:left; padding:11px 13px; vertical-align:top; border-bottom:2px solid var(--line);} .prose th{font-size:11.5px; text-transform:uppercase; letter-spacing:1.2px; color:var(--ink); background:var(--yellow); font-weight:900; border-bottom:3px solid var(--ink);} .prose tr:last-child td{border-bottom:none;} .prose td{color:var(--pencil); font-weight:600;} .prose .btn-primary{color:var(--ink); border-bottom:3px solid var(--ink); margin:6px 0;} .prose .btn-primary:hover{background:var(--green);} /* ---------------- faq ---------------- */ .faq{max-width:760px; margin:0 auto;} .faq details{background:var(--paper-2); color:var(--ink); border:3px solid var(--ink); border-radius:14px; padding:2px 18px 14px; margin-bottom:14px; box-shadow:5px 5px 0 var(--ink);} .faq details[open]{box-shadow:5px 5px 0 var(--yellow);} .faq summary{font-weight:900; font-size:16px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center; padding:13px 0; min-height:46px;} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:'+'; font-weight:900; font-size:22px; line-height:1; flex:0 0 auto;} .faq details[open] summary::after{content:'\2212';} .faq p{margin-top:2px; color:var(--pencil); font-weight:600; font-size:15px;} /* ---------------- footer ---------------- */ .foot{background:var(--ink); color:#c7d5f5; padding:40px 22px; text-align:center; font-size:13.5px; font-weight:700; border-top:3px solid var(--ink);} .foot a{display:inline-block; padding:9px 10px; color:#fff; font-weight:800; white-space:nowrap; border-radius:6px; min-height:44px; box-sizing:border-box; display:inline-flex; align-items:center;} .foot a:hover{background:rgba(255,255,255,.12);} .foot .fl{margin-bottom:14px; line-height:1.9;} /* ---------------- structured footer ---------------- The three comparison pages used to sit in the top nav, which is not where a long-tail article belongs. They live here instead, grouped with the guides, so they stay one click from every page and keep their internal links without crowding the header. */ .footcols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; max-width:940px; margin:0 auto 22px; text-align:left;} .footcol h2{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#8fa3d4; margin:0 0 9px; font-weight:900;} .footcol a{display:block; color:#fff; font-weight:800; font-size:13.5px; padding:7px 8px; margin-left:-8px; border-radius:7px; min-height:44px; line-height:30px;} .footcol a:hover{background:rgba(255,255,255,.12);} .footnote-line{color:#c7d5f5; font-size:13px; font-weight:700;} @media (max-width:720px){ .footcols{grid-template-columns:1fr 1fr; gap:14px 18px; text-align:left;} } @media (max-width:420px){ .footcols{grid-template-columns:1fr;} } /* ---------------- responsive ---------------- */ @media (max-width:900px){ .d1,.d2,.d3,.d4{display:none;} } @media (max-width:600px){ .nav{padding:10px 14px; gap:10px;} .brand{font-size:21px;} .navlinks a{font-size:13px; padding:7px 9px;} /* The CTA is hidden rather than shrunk on phones. Kept in the bar it sat on top of the scrolling game links, so "Caption Clash" read as clipped and broken - and it is redundant here anyway, because every page puts a much larger primary button in the hero directly below this bar. */ .navcta{display:none;} .hero{padding:36px 16px 34px;} .hero h1{font-size:35px; letter-spacing:-1.1px;} .hero .sub{font-size:17px;} .btn-primary,.btn-ghost{font-size:16px; padding:14px 24px; box-shadow:4px 4px 0 var(--ink);} .board{padding:16px; box-shadow:5px 5px 0 var(--ink); margin-top:34px;} .sketch{height:172px;} .sketch svg{height:160px;} .guess{font-size:12px; padding:6px 11px;} .stats{padding:30px 16px; gap:12px;} .stats div{padding:13px 22px; min-width:132px;} .stats b{font-size:27px;} .sec{padding:44px 18px;} /* Looser leading for long-form reading on a phone. It also grows the line box around inline links, which WCAG exempts from the target-size rule but which are still easier to hit with more room. */ .prose{margin:22px auto; padding:26px 18px 22px; border-radius:14px; box-shadow:5px 5px 0 var(--ink); line-height:1.72;} .prose table{font-size:14px;} .prose th,.prose td{padding:9px 10px;} .gcard p{min-height:0;} .tk{font-size:13px;} } /* Motion here is decoration, never information: everything below still reads identically with animation switched off. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;} .stroke{stroke-dashoffset:0;} .guess{opacity:1;} } /* ---------------- mobile nav: hamburger ---------------- The bar used to scroll its 11 game links sideways with a hidden scrollbar, which gave no hint that more existed, and the CTA had to be hidden on phones because it sat on top of that scrolling row. Behind a hamburger the links no longer compete for the bar, so the CTA comes back on mobile instead. */ .navtoggle{display:none; width:44px; height:44px; flex:0 0 auto; align-items:center; justify-content:center; gap:5px; flex-direction:column; background:var(--paper); border:3px solid var(--ink); border-radius:11px; box-shadow:3px 3px 0 var(--ink); cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;} .navtoggle:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink);} .navtoggle span{display:block; width:20px; height:3px; border-radius:2px; background:var(--ink); transition:transform .2s ease, opacity .15s ease;} .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);} .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0;} .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);} @media (max-width:900px){ .navtoggle{display:flex;} .nav{gap:10px; flex-wrap:wrap;} .brand{flex:1 1 auto;} /* Off-canvas panel rather than an inline row: inline wrapping grew the bar to ~220px and pushed the page below the fold, which is why the sideways scroll existed in the first place. */ .navlinks{position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0; overflow:visible; background:var(--panel,#fff); border-bottom:3px solid var(--ink); box-shadow:0 6px 0 rgba(34,48,79,.13); padding:8px; max-height:70vh; overflow-y:auto;} .navlinks.open{display:flex;} .navlinks a{font-size:16px; padding:13px 14px; border-radius:10px;} .navlinks a + a{border-top:2px solid rgba(34,48,79,.08);} } @media (max-width:600px){ /* Restored: with the links behind the hamburger there is nothing for it to overlap, and it is the primary action on the page. */ .navcta{display:inline-flex; align-items:center; font-size:13px; padding:9px 13px; min-height:44px; box-sizing:border-box;} .nav{padding:10px 12px; gap:8px;} } @media (max-width:360px){ /* Only at the very narrowest does the CTA still not fit beside brand+toggle. */ .navcta{display:none;} }