/* Alphablitz info pages, following the Smidgen brand guidelines:
   Bayon for game titles (short words only), Londrina Solid at regular weight for section
   headlines, buttons and stickers, Rubik for body text. Purple and orange lead; yellow and blue
   are big happy backgrounds, never text on white. Black outlines, hard shadows with no blur,
   round corners everywhere, outlined wavy dividers, brand doodles at the edges.
   The game's own letter tiles are the one Alphablitz-specific element. */
:root{
  --purple:#753189; --orange:#EA5D00; --yellow:#FFF503; --blue:#20A4F3; --black:#000000; --white:#FFFFFF;
  --link:#0B5FA5; --muted:#444444; --wash:#F4EAF7;
  --line:3px solid var(--black);
  --title:'Bayon', Impact, sans-serif; --fun:'Londrina Solid', Arial, sans-serif; --body:'Rubik', Arial, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--black);font:400 18px/1.6 var(--body)}
img{max-width:100%;display:block}
a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
b,strong{font-weight:700}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:8px}
.wrap{width:min(1086px, 100% - 32px);margin-inline:auto}
.narrow{width:min(720px, 100% - 32px);margin-inline:auto}
p{margin:0 0 14px}
.muted{color:var(--muted)}

/* Header */
.site-head{background:var(--white);border-bottom:var(--line);position:sticky;top:0;z-index:5}
.site-head .wrap{display:flex;align-items:center;gap:20px;min-height:70px;flex-wrap:wrap;padding-block:10px}
.brand{display:flex;align-items:center;gap:3px;text-decoration:none;margin-right:auto}
.brand .t{width:30px;height:30px;border-radius:9px;border:var(--line);display:grid;place-items:center;font:400 19px/1 var(--fun);color:var(--black);transform:rotate(var(--r,0deg))}
.brand .word{font:400 26px/1 var(--title);color:var(--purple);margin-left:9px;letter-spacing:.02em}
.nav{display:flex;gap:4px 20px;flex-wrap:wrap;align-items:center}
.nav a{font:500 16px/1 var(--body);color:var(--black);text-decoration:none;padding:8px 2px;border-bottom:4px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--orange)}

/* Buttons: purple with white text; the second button is white with purple text. Fully round. */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--purple);color:var(--white);font:400 24px/1 var(--fun);padding:13px 28px 12px;border:var(--line);border-radius:999px;box-shadow:5px 5px 0 var(--black);text-decoration:none;transition:transform .12s, box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--black)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--black)}
.btn.small{font-size:19px;padding:9px 18px 8px;box-shadow:3px 3px 0 var(--black)}
.btn.second{background:var(--white);color:var(--purple)}

/* Sticker (eyebrow): orange, white text, tilted */
.sticker{display:inline-block;background:var(--orange);color:var(--white);font:400 22px/1 var(--fun);padding:8px 16px 7px;border:var(--line);border-radius:14px;box-shadow:4px 4px 0 var(--black);transform:rotate(-3deg)}

/* Hero: a big happy yellow band with an outlined wave edge */
.hero{background:var(--yellow);position:relative;overflow:hidden;padding:52px 0 104px}
.hero .wave{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:56px;display:block}
.hero .squig{position:absolute;pointer-events:none;z-index:0}
.hero > .wrap{position:relative;z-index:1}
.hero .wave{z-index:2}
.hero h1{font:400 clamp(44px, 8vw, 84px)/1 var(--fun);margin:20px 0 14px;color:var(--black)}
/* Bayon is for game titles only, short words. */
.hero h1.title{font:400 clamp(48px, 9vw, 96px)/.95 var(--title);letter-spacing:.01em}
.hero p.lead{font-size:clamp(18px, 2.4vw, 21px);max-width:58ch;margin:0 0 26px}
.hero .actions{display:flex;gap:16px;flex-wrap:wrap}

/* Signature: the game's letter tiles spelling a word */
.tiles{display:flex;gap:6px;flex-wrap:nowrap;margin:16px 0 4px}
@media (min-width:720px){ .tiles{gap:10px} }
.tile{--c:#FFCF6E;position:relative;width:clamp(26px, calc((100vw - 32px - (var(--n, 6) - 1) * 6px) / var(--n, 6)), 78px);aspect-ratio:1;background:var(--white);border:var(--line);border-radius:18%;box-shadow:4px 4px 0 var(--black);padding:clamp(2px, .7vw, 5px);transform:rotate(var(--r,0deg))}
.tile i{position:absolute;top:3px;left:6px;font:700 clamp(8px,1.4vw,12px)/1 var(--body);color:#555;font-style:normal}
.tile b{display:grid;place-items:center;height:100%;background:var(--c);border-radius:14%;font:400 clamp(16px, calc(60vw / var(--n, 6)), 50px)/1 var(--fun);color:var(--black)}

/* Sections */
main section{padding:60px 0}
main section.tint{background:var(--wash);border-top:var(--line);border-bottom:var(--line)}
h2{font:400 clamp(36px, 5vw, 54px)/1 var(--fun);margin:0 0 16px;color:var(--purple)}
h3{font:400 30px/1.1 var(--fun);margin:0 0 6px}

/* Spec tiles, like a game box's ages / players / time */
.facts{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));gap:18px}
.fact{background:var(--yellow);border:var(--line);border-radius:18px;box-shadow:5px 5px 0 var(--black);padding:16px 14px 14px;text-align:center}
.fact strong{display:block;font:400 44px/1 var(--fun)}
.fact span{font-weight:700}

/* Steps: How to play is a real sequence, so it's numbered */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:16px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:50px 1fr;gap:16px;align-items:center;background:var(--white);border:var(--line);border-radius:26px;padding:16px 20px 14px 16px;box-shadow:5px 5px 0 var(--black)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--purple);color:var(--white);font:400 28px/1 var(--fun);border:var(--line)}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0 18px}
.legend .tile{width:60px;--n:1}
.legend .tile b{font-size:32px}
.legend div{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:700}

/* FAQ */
.faq details{border:var(--line);border-radius:26px;background:var(--white);box-shadow:5px 5px 0 var(--black);margin-bottom:16px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;font:400 26px/1.2 var(--fun);padding:16px 34px 14px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:12px;font:400 34px/1 var(--fun);color:var(--orange)}
.faq details[open] summary::after{content:"–"}
.faq details > div{padding-bottom:16px}

/* Photos */
.gallery{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));gap:22px}
.gallery figure{margin:0;border:var(--line);border-radius:26px;overflow:hidden;box-shadow:5px 5px 0 var(--black);background:var(--white)}
.gallery figcaption{padding:12px 16px;font-weight:500;border-top:var(--line)}

/* Draft notes: easy to spot, easy to delete. Pages stay hidden from search until they're gone. */
.todo{border:3px dashed var(--orange);background:#FFF1E6;color:#7A3100;border-radius:18px;padding:14px 16px;margin:0 0 14px;font-weight:500}
.todo::before{content:"✏️ To write: ";font-weight:700}
.photo-slot{aspect-ratio:4/3;display:grid;place-items:center;text-align:center;padding:20px;color:var(--purple);font:400 24px/1.2 var(--fun);background:repeating-linear-gradient(45deg, #EADCF0 0 14px, #F4EAF7 14px 28px)}

/* Closing band: purple, white text, white button */
.cta{background:var(--purple);color:var(--white);border-top:var(--line)}
.cta .wrap{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta h2{color:var(--white);margin:0}
.cta .btn{background:var(--white);color:var(--purple)}

/* Footer, like playsmidgen.com's */
.site-foot{background:var(--black);color:#E9E9E9;padding:44px 0 30px;font-size:16px}
.site-foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
.site-foot h4{font:400 26px/1 var(--fun);color:var(--white);margin:0 0 10px}
.site-foot a{color:var(--white);text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.site-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.site-foot .legal{margin-top:28px;padding-top:18px;border-top:1px solid #444;display:flex;flex-wrap:wrap;gap:6px 18px;color:#BDBDBD}
@media (max-width:720px){
  .site-foot .cols{grid-template-columns:1fr 1fr}
  .site-foot .cols > div:first-child{grid-column:1 / -1}
  .nav{width:100%;justify-content:space-between}
  .site-head .btn.small{display:none}
  main section{padding:46px 0}
  .hero .squig.sm-hide{display:none}
  .tile i{display:none}
}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} }

/* Board game hero: the Alphablitz logo on its game color, like a box on a product card */
.hero-split{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.logo-box{background:var(--purple);border:var(--line);border-radius:26px;box-shadow:8px 8px 0 var(--black);padding:clamp(18px, 3vw, 34px);transform:rotate(2deg)}
.logo-box img{width:100%;height:auto}
@media (max-width:820px){ .hero-split{grid-template-columns:1fr} .logo-box{order:-1;max-width:420px} }

/* App screenshots */
.hero-split > img, .hero-split > .phone{justify-self:center}
.phone{width:min(300px, 70vw);height:auto}
.hero-split > img:not(.phone){width:100%;height:auto}
.shots{display:flex;gap:18px;justify-content:center}
.shots img{width:min(220px, 42vw);height:auto}
/* Playtest photos: square, side by side on wider screens and stacked on phones */
.gallery{grid-template-columns:1fr 1fr}
.gallery img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
@media (max-width:720px){ .gallery{grid-template-columns:1fr} }
.steps + p{margin-top:20px}

/* Laptop with a phone overlapping its side */
.devices{position:relative;width:100%;padding-right:12%;padding-bottom:8%}
.devices .laptop{width:100%;height:auto;display:block}
.devices .phone-over{position:absolute;right:0;bottom:0;width:30%;height:auto;filter:drop-shadow(6px 6px 0 #000)}

/* Board game page: a zigzag edge with a thick black line, teeth a fixed size on any screen */
.hero.jagged .wave{display:none}
.hero.jagged::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:30px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='30' viewBox='0 0 44 30'%3E%3Cpath d='M0 26 L22 5 L44 26 V30 H0Z' fill='%23FFFFFF'/%3E%3Cpath d='M-1 27 L22 5 L45 27' fill='none' stroke='%23000' stroke-width='6' stroke-linejoin='miter'/%3E%3C/svg%3E") repeat-x left bottom / 44px 30px}

/* Header logo (the long Alphablitz logo) */
.brand img{height:44px;width:auto;display:block}
@media (max-width:720px){ .brand img{height:36px} .brand{margin-inline:auto} .site-head .wrap{justify-content:center} }

/* Past dailies */
.dcards{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.dcard{border:var(--line);border-radius:18px;padding:16px 18px;box-shadow:4px 4px 0 var(--black);background:var(--white)}
.dcard-top{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start}
.dcard h3{font:400 28px/1 var(--fun);margin:2px 0 4px}
.dcard p{margin:0}
.dnum{width:38px;height:38px;border-radius:50%;background:var(--purple);color:var(--white);display:grid;place-items:center;font:400 22px/1 var(--fun);border:var(--line)}
.dstars{color:var(--orange);font-size:20px;letter-spacing:2px;white-space:nowrap;-webkit-text-stroke:1px var(--black)}
.dwords{margin-top:12px !important;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dwords span{color:var(--muted);font-size:15px;margin-right:4px}
.dwords b{font:400 18px/1 var(--fun);background:var(--wash);border:2px solid var(--black);border-radius:999px;padding:5px 11px 4px}
.podium{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:10px}
.podium li{display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:center;background:var(--white);border:var(--line);border-radius:16px;padding:12px 16px}
.podium .place{grid-row:span 2;width:40px;height:40px;border-radius:50%;background:var(--orange);color:var(--white);display:grid;place-items:center;font:400 24px/1 var(--fun);border:var(--line)}
.podium b{font-size:19px}
.podium li > span:nth-of-type(2){font:400 22px/1 var(--fun);color:var(--purple);text-align:right}
.podium .muted{grid-column:2 / 4;font-size:15px}
.dnav{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.archive{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.archive li{border-bottom:2px solid var(--black);padding-bottom:12px}
.archive a{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.archive a b{font:400 26px/1 var(--fun);color:var(--purple)}
.archive p{margin:4px 0 0;font-size:16px}
.spoil-hide .spoilers{display:none}
.spoil-guard{border:var(--line);border-radius:18px;padding:22px;box-shadow:4px 4px 0 var(--black);background:var(--wash);text-align:center}
.spoil-guard h2{margin-top:0}
.spoil-guard .actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.spoil-guard button{cursor:pointer}
/* Past daily: cards on the left, leaderboard in a sticky side panel; on phones the leaderboard comes first */
.dlayout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:36px;align-items:start}
.dlayout.solo{grid-template-columns:minmax(0,720px);justify-content:center}
.dmain{grid-column:1;grid-row:1}
.dside{grid-column:2;grid-row:1;position:sticky;top:96px}
.dside-in{background:var(--wash);border:var(--line);border-radius:20px;padding:20px;box-shadow:4px 4px 0 var(--black)}
.dside h2{font-size:32px;margin-bottom:14px}
.dside .podium{margin-bottom:12px}
.dside .podium li{padding:10px 12px}
.dside p.muted{font-size:15px;margin:0}
.spoil-guard{max-width:720px;margin:0 auto}
@media (max-width:860px){
  .dlayout{grid-template-columns:minmax(0,1fr);gap:28px}
  .dmain,.dside{grid-column:1;grid-row:auto}
  .dside{position:static}
}
.podium li > span:nth-of-type(2){white-space:nowrap}
/* How to play: the app's numbered rules with its own pictures */
.tldr{border:var(--line);border-radius:22px;padding:22px 24px 10px;box-shadow:5px 5px 0 var(--black);background:var(--white)}
.tldr h2{font-size:34px;margin-bottom:10px}
.tldr ul{margin:0;padding-left:20px}
.tldr li{margin-bottom:10px}
.howto{list-style:none;padding:0;margin:0;display:grid;gap:26px;counter-reset:h}
.howto > li{counter-increment:h;display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-items:start}
.howto > li::before{content:counter(h);grid-row:1 / span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--purple);color:var(--white);font:400 26px/1 var(--fun);border:var(--line)}
.howto p{margin:6px 0 0;font-size:19px}
.howto figure{grid-column:2;margin:14px 0 0;border:var(--line);border-radius:18px;overflow:hidden;box-shadow:4px 4px 0 var(--black);background:#14213d;max-width:520px}
.howto figure img{width:100%;height:auto}
.howto figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:600px){ .howto > li{grid-template-columns:36px 1fr;column-gap:12px} .howto > li::before{width:36px;height:36px;font-size:21px} .howto p{font-size:17px} .howto figure{grid-column:1 / -1} }

/* "Did you know?" tip on How to play */
.tipbox{margin:34px 0 28px;background:var(--blue);color:var(--black);border:var(--line);border-radius:22px;padding:26px 24px 18px;box-shadow:5px 5px 0 var(--black);position:relative}
.tipbox .sticker{position:absolute;top:-18px;left:18px;font-size:20px}
.tipbox p{margin:6px 0 0}