/* Cubeword hub + Stair teaser. Shares the game's tokens (app.css is loaded first). */
.hub{max-width:900px;margin:0 auto;padding:18px max(16px, env(safe-area-inset-right,0px)) 40px max(16px, env(safe-area-inset-left,0px))}
.hub .fam{display:flex;gap:6px;align-items:center;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.hub .fam a{color:inherit;text-decoration:none}
.hub .fam a:hover{color:var(--fg);text-decoration:underline}
.hub .fam b{font-weight:500;color:var(--fg)}
.hero{max-width:640px;margin-bottom:28px}
.kicker{margin:0 0 10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hero h1{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:clamp(34px,6vw,54px);line-height:1.02;margin:0 0 14px;letter-spacing:-.015em;text-wrap:balance}
.lede{margin:0;font-size:16px;line-height:1.5;color:var(--fg);max-width:60ch}
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:34px}
.card{display:grid;grid-template-rows:170px auto;background:var(--panel);border-radius:18px;overflow:hidden;color:inherit;text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line),0 10px 30px rgba(0,0,0,.12)}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card .meta{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px}
.card h2{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:26px;margin:0;line-height:1.05}
.card p{margin:0;font-size:14px;line-height:1.45;color:var(--fg)}
.card .tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card .cta{margin-top:6px;font-weight:500;font-size:14px;color:var(--word-ink)}
.card.soon .cta{color:var(--muted)}
/* card art: little cube-lattice drawings in CSS */
.art{position:relative;background:radial-gradient(120% 90% at 50% 20%, var(--panel) 0%, var(--panel-2) 100%);overflow:hidden}
.art span{position:absolute;width:34px;height:34px;border-radius:5px;background:var(--face);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 6px 0 -2px var(--line)}
.art-cube span:nth-child(1){left:calc(50% - 60px);top:38px}.art-cube span:nth-child(2){left:calc(50% - 17px);top:38px}.art-cube span:nth-child(3){left:calc(50% + 26px);top:38px}
.art-cube span:nth-child(4){left:calc(50% - 60px);top:80px}.art-cube span:nth-child(5){left:calc(50% - 17px);top:80px;background:var(--accent)}.art-cube span:nth-child(6){left:calc(50% + 26px);top:80px}
.art-cube span:nth-child(7){left:calc(50% - 60px);top:122px}.art-cube span:nth-child(8){left:calc(50% - 17px);top:122px;background:var(--word)}.art-cube span:nth-child(9){left:calc(50% + 26px);top:122px}
.art-stair span:nth-child(1){left:calc(50% - 90px);top:112px}.art-stair span:nth-child(2){left:calc(50% - 47px);top:112px}.art-stair span:nth-child(3){left:calc(50% - 4px);top:112px;background:var(--word)}
.art-stair span:nth-child(4){left:calc(50% - 4px);top:70px}.art-stair span:nth-child(5){left:calc(50% + 39px);top:70px;background:var(--accent)}.art-stair span:nth-child(6){left:calc(50% + 39px);top:28px}
/* In Ink: words in ink below, pencil above */
.art-sky span:nth-child(1){left:calc(50% - 60px);top:122px}.art-sky span:nth-child(2){left:calc(50% - 17px);top:122px;background:var(--accent)}.art-sky span:nth-child(3){left:calc(50% + 26px);top:122px}
.art-sky span:nth-child(4){left:calc(50% - 60px);top:80px}.art-sky span:nth-child(5){left:calc(50% - 17px);top:80px;background:var(--word)}
.art-sky span:nth-child(6){left:calc(50% + 26px);top:80px;background:transparent;box-shadow:inset 0 0 0 1px var(--line)}.art-sky span:nth-child(7){left:calc(50% - 17px);top:38px;background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.art-sky span:nth-child(8){left:calc(50% - 60px);top:38px;background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.art-grow span:nth-child(1){left:calc(50% - 90px);top:122px;background:var(--word)}.art-grow span:nth-child(2){left:calc(50% - 90px);top:80px;background:var(--word)}.art-grow span:nth-child(3){left:calc(50% - 90px);top:38px;background:var(--accent)}
.art-grow span:nth-child(4){left:calc(50% - 47px);top:122px}.art-grow span:nth-child(5){left:calc(50% - 4px);top:122px}.art-grow span:nth-child(6){left:calc(50% + 39px);top:122px;background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.art-grow span:nth-child(7){left:calc(50% - 47px);top:80px;background:transparent;box-shadow:inset 0 0 0 1px var(--line)}.art-grow span:nth-child(8){left:calc(50% + 39px);top:80px;background:transparent;box-shadow:inset 0 0 0 1px var(--line)}.art-grow span:nth-child(9){left:calc(50% + 82px);top:122px;background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.how h3{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-weight:700}
.how ol{margin:0;padding-left:20px;max-width:62ch;font-size:15px;line-height:1.5}
.how li{margin-bottom:8px}
.board{margin:18px 0 0;font-size:14px;color:var(--muted)}
/* the Stair model: three CSS blocks stepping up, slowly turning */
.model{height:300px;position:relative;margin:10px 0 30px;border-radius:18px;background:radial-gradient(120% 90% at 50% 25%, var(--panel) 0%, var(--panel-2) 100%);overflow:hidden;perspective:1200px}
.rig{position:absolute;left:50%;top:66%;width:0;height:0;transform-style:preserve-3d;animation:turn 28s linear infinite;transform:rotateX(-26deg) rotateY(-34deg)}
@keyframes turn{from{transform:rotateX(-26deg) rotateY(-34deg)}to{transform:rotateX(-26deg) rotateY(326deg)}}
@media (prefers-reduced-motion:reduce){.rig{animation:none}}
.block{position:absolute;transform-style:preserve-3d;--u:24px}
.block i{position:absolute;display:block;background:var(--face);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
/* each block is W x H x D units: front face, right face, top face */
.b1{--w:7;--h:3;--d:2;transform:translate3d(calc(var(--u) * -3.5),calc(var(--u) * -3),calc(var(--u) * 2))}
.b2{--w:7;--h:5;--d:2;transform:translate3d(calc(var(--u) * -3.5),calc(var(--u) * -5),calc(var(--u) * 0))}
.b3{--w:7;--h:7;--d:3;transform:translate3d(calc(var(--u) * -3.5),calc(var(--u) * -7),calc(var(--u) * -3))}
.block .f{width:calc(var(--u) * var(--w));height:calc(var(--u) * var(--h));transform:translateZ(calc(var(--u) * var(--d)));background:var(--face)}
.block .r{width:calc(var(--u) * var(--d));height:calc(var(--u) * var(--h));left:calc(var(--u) * var(--w));transform-origin:left;transform:translateZ(calc(var(--u) * var(--d))) rotateY(90deg);background:var(--face);filter:brightness(.8)}
.block .t{width:calc(var(--u) * var(--w));height:calc(var(--u) * var(--d));transform-origin:top;transform:rotateX(90deg);background:var(--face);filter:brightness(1.05)}
.block i{background-image:repeating-linear-gradient(90deg,transparent 0 calc(var(--u) - 2px),var(--line) calc(var(--u) - 2px) var(--u)),repeating-linear-gradient(0deg,transparent 0 calc(var(--u) - 2px),var(--line) calc(var(--u) - 2px) var(--u))}