:root{color-scheme:light;--ink:#142b42;--paper:#faf9f2;--yellow:#f7dc62;--line:#142b4230;--screen:#101b23}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Avenir Next","Hiragino Sans","Apple SD Gothic Neo","Microsoft JhengHei",sans-serif}
a{color:inherit}
img{max-width:100%}
header,main,footer{max-width:1160px;margin:auto;padding-left:40px;padding-right:40px}
header{display:flex;justify-content:space-between;align-items:center;padding-top:28px;padding-bottom:28px;border-bottom:1px solid var(--line);gap:24px}
.wordmark{font-weight:800;font-size:23px;letter-spacing:-1px;text-decoration:none}
.languages{display:flex;gap:8px;flex-wrap:wrap}
.languages button{font:inherit;font-size:14px;color:var(--ink);background:transparent;border:1px solid transparent;padding:9px 12px;border-radius:24px;cursor:pointer}
.languages button[aria-pressed=true]{border-color:var(--ink);background:var(--yellow)}
button:focus-visible,a:focus-visible{outline:3px solid #205ddd;outline-offset:4px}

/* Hero with a phone showing the real game lobby */
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center;padding:74px 0 64px}
.eyebrow{font-family:monospace;letter-spacing:.14em;font-size:14px;margin:0 0 24px}
.hero h1{font-size:clamp(38px,5vw,64px);line-height:1.18;letter-spacing:-.045em;margin:0;text-wrap:balance}
.hero .intro{font-size:19px;line-height:1.9;max-width:600px;margin:30px 0 0}
.hero-links{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px}
.game-link{display:inline-block;border-bottom:2px solid var(--ink);text-decoration:none;font-weight:700;padding-bottom:4px}
.phone-figure{margin:0;justify-self:end;width:min(100%,300px);text-align:center}
.phone{position:relative;border:1px solid var(--ink);border-radius:34px;padding:9px;background:var(--screen);box-shadow:10px 10px 0 var(--yellow)}
.phone img{display:block;width:100%;height:auto;border-radius:25px;background:var(--screen)}
.phone-figure figcaption{font-family:monospace;font-size:12px;letter-spacing:.08em;margin-top:26px;color:#142b42b3}

/* Game 001 article */
.game{border:1px solid var(--ink);display:grid;grid-template-columns:.8fr 1.2fr;min-height:370px;margin-bottom:72px}
.cover{background:var(--yellow);padding:42px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--ink);position:relative}
.number{font:14px monospace;letter-spacing:.1em}
.cover h2{font-family:Georgia,serif;font-size:clamp(50px,7vw,80px);font-weight:400;line-height:.94;letter-spacing:-.065em;margin:24px 0}
.cover small{font-size:14px;letter-spacing:.08em}
.app-icon{position:absolute;right:34px;bottom:34px;width:64px;height:64px;box-shadow:4px 4px 0 var(--ink)}
.details{padding:44px}
.badge{display:inline-block;border:1px solid var(--line);border-radius:3px;padding:7px 10px;font-size:14px}
.details h3{font-size:26px;line-height:1.45;margin:24px 0 16px}
.details p{font-size:16px;line-height:1.9}
.features{display:flex;gap:18px;border-top:1px solid var(--line);margin-top:26px;padding-top:20px;flex-wrap:wrap;font-size:14px}
.details .game-link{margin-top:24px}

/* Section headings */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:0 0 28px}
.section-head h2{font-size:clamp(28px,3.4vw,38px);line-height:1.3;letter-spacing:-.03em;margin:0}
.section-head p{font-size:16px;line-height:1.8;margin:10px 0 0;max-width:560px}
.section-head .count{font:14px monospace;letter-spacing:.12em;white-space:nowrap;padding-bottom:6px}

/* Six-game lineup (home): pastel covers with pixel boards drawn in CSS */
.lineup{margin-bottom:72px}
.lineup-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lineup-card{border:1px solid var(--ink);background:#fff;display:flex;flex-direction:column;text-decoration:none;height:100%}
.lineup-card:hover .mb{transform:rotate(-6deg) translateY(-6px)}
.lineup-cover{height:196px;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--ink);background-color:var(--cover);background-image:linear-gradient(90deg,#ffffff1f 1px,transparent 1px),linear-gradient(#ffffff1f 1px,transparent 1px);background-size:12px 12px}
.lineup-meta{padding:16px 18px 18px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.lineup-meta h3{font-size:18px;margin:0;letter-spacing:-.01em}
.lineup-meta span{font-size:13px;white-space:nowrap;color:#142b42b3}
.cover-dice{--cover:#9bceb6}.cover-match3{--cover:#80b3bc}.cover-2048{--cover:#9c9bc5}.cover-snake{--cover:#a7c574}.cover-blocks{--cover:#c58c9e}.cover-merge{--cover:#d9b974}

/* Pixel mini boards (ported from Little Puzzles game-art) */
.mb{--mb:132px;width:var(--mb);height:var(--mb);display:grid;gap:4px;padding:6px;box-shadow:5px 5px 0 #152d3655;transform:rotate(-6deg);transition:transform .2s}
.mb-dice,.mb-match{grid-template:repeat(4,minmax(0,1fr))/repeat(4,minmax(0,1fr));background:#25433e}
.mb-dice>span{background:#ffffff09;min-width:0;min-height:0}
.die{--f:#e8deca;--k:#66543e;display:grid;grid-template:repeat(3,minmax(0,1fr))/repeat(3,minmax(0,1fr));gap:9%;padding:19%;width:100%;height:100%;background:var(--f);color:var(--k);box-shadow:inset 3px 3px 0 #ffffff50,inset -3px -3px 0 #00000026;font-style:normal}
.die b{display:block;min-width:0;min-height:0}
.die .p{background:var(--k)}
.die.d2{--f:#b6d9bc;--k:#49714f}.die.d3{--f:#b5d3e7;--k:#466c8c}.die.d4{--f:#cbb8e5;--k:#735596}.die.d5{--f:#efb4ba;--k:#a34e64}.die.d6{--f:#efc888;--k:#987031}
.die.d7{--f:#d6ee91;--k:#627732;grid-template:1fr/1fr;padding:18%}
.die.d7 svg{width:100%;height:100%;fill:currentColor}
.gem{display:grid;place-items:center;min-width:0;min-height:0;background:var(--gb);color:var(--gk);box-shadow:inset 3px 3px 0 #ffffff50,inset -3px -3px 0 #00000026}
.gem svg{width:62%;height:62%;fill:currentColor}
.g1{--gb:#f4a7b5;--gk:#a43b60}.g2{--gb:#f5d989;--gk:#a96c20}.g3{--gb:#b8b4ee;--gk:#6754ab}.g4{--gb:#b8dfa4;--gk:#427b49}.g5{--gb:#a2d9ee;--gk:#357899}.g6{--gb:#f6b796;--gk:#b25643}
.gem.hit{outline:2px solid #fff0a2}
.mb-2048{grid-template:repeat(4,minmax(0,1fr))/repeat(4,minmax(0,1fr));background:#514b71}
.t{display:grid;place-items:center;min-width:0;min-height:0;font-weight:800;font-size:13px;background:#e7e0f4;color:#514366;box-shadow:inset 2px 2px #ffffff40,inset -2px -2px #00000020}
.t0{background:#706789;box-shadow:inset 2px 2px #00000016}.t4{background:#cfc2e6}.t8{background:#ae99d3;color:#241d38}.t16{background:#8c70b2;color:#fff}.t32{background:#775899;color:#fff}.t64{background:#5e417d;color:#fff}.t128,.t256{background:#baf67b;color:#29432c;font-size:11px}
.mb-snake{grid-template:repeat(8,minmax(0,1fr))/repeat(8,minmax(0,1fr));gap:2px;padding:5px;background:#a8c57a77}
.mb-snake>span{min-width:0;min-height:0;background:#b4cf8888}
.mb-snake .s{background:#3f653a}
.mb-snake .h{display:grid;place-items:center;color:#d5ecb3;font-size:9px;font-weight:900;line-height:1}
.mb-snake .h::after{content:"••"}
.mb-snake .f{background:#f79568}
.mb-blocks{grid-template-columns:repeat(6,1fr);gap:3px;padding:4px;background:#d18fa9}
.mb-blocks>span{min-width:0;min-height:0;background:#dda1b899}
.mb-blocks .on{background:#895777;box-shadow:inset 2px 2px #b97998}
.mb-blocks .fl{background:#faf0c2;box-shadow:inset 2px 2px #fff9df}
.mb-merge{grid-template-columns:repeat(3,1fr);gap:5px;padding:0;background:transparent;box-shadow:none}
.m{display:grid;place-items:center;font-size:19px;font-weight:700;background:#e2a760;color:#86552f;box-shadow:inset 3px 3px 0 #ffffff50,inset -3px -3px 0 #00000026}
.m4{background:#fff0b3;color:#aa7f34}.m8{background:#d87757;color:#fff4d7}.m16{background:#a1b967;color:#f6fbcf}

/* Real game screens (game page) */
.screens{margin-bottom:72px}
.screens-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:36px 28px}
.screen-card{scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start}
.screen-card .phone{width:min(100%,270px);border-radius:26px;padding:7px;box-shadow:7px 7px 0 var(--yellow)}
.screen-card .phone img{border-radius:20px}
.screen-meta{padding:22px 4px 0;max-width:300px}
.screen-meta h3{font-size:20px;margin:0;letter-spacing:-.01em}
.screen-meta .kind{display:block;font-size:13px;margin-top:8px;color:#142b42b3}
.screen-meta p{font-size:15px;line-height:1.8;margin:10px 0 0}
.screens-note{font-size:14px;line-height:1.8;margin:32px 0 0;padding-top:20px;border-top:1px solid var(--line);color:#142b42b3;max-width:720px}

/* Store / note */
.stores{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}
.stores button,.stores a{padding:18px 24px;background:var(--ink);color:var(--paper);border:0;border-radius:6px;text-align:left;font:inherit;text-decoration:none}
.stores button:disabled{opacity:.65}
.stores a:hover{background:#254865}
.stores small{display:block;font-size:13px}
.note{max-width:700px;font-size:16px;line-height:1.9;margin-bottom:60px}
.note h2{font-size:26px;line-height:1.4;letter-spacing:-.02em;margin:0 0 12px}
footer{border-top:1px solid var(--line);padding-top:24px;padding-bottom:32px;display:flex;justify-content:space-between;gap:20px;font-size:14px}
footer span:last-child{font-family:monospace}

@media(max-width:900px){
.hero{grid-template-columns:1fr;gap:40px;padding:56px 0 48px}
.phone-figure{justify-self:center;width:min(100%,260px)}
.lineup-grid{grid-template-columns:repeat(2,1fr);gap:16px}
.screens-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
header,main,footer{padding-left:22px;padding-right:22px}
header{align-items:flex-start;flex-direction:column;gap:16px}
.hero{padding:44px 0 40px;gap:36px}
.hero .intro{font-size:17px}
.game{grid-template-columns:1fr;margin-bottom:48px}
.cover{border-right:0;border-bottom:1px solid var(--ink);min-height:270px;padding:28px}
.app-icon{right:24px;bottom:24px;width:52px;height:52px}
.details{padding:28px}
.cover h2{font-size:68px}
.section-head{flex-direction:column;align-items:flex-start;gap:8px}
.section-head .count{display:none}
.lineup{margin-bottom:48px}
.lineup-cover{height:160px}
.mb{--mb:104px}
.t{font-size:11px}.t128,.t256{font-size:9px}.m{font-size:15px}
.lineup-meta{padding:12px 14px 14px;flex-direction:column;gap:4px}
.lineup-meta h3{font-size:16px}
.screens{margin-bottom:48px}
.screens-grid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;margin:0 -22px;padding:4px 22px 16px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.screen-meta{padding-top:18px}
footer{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.mb{transition:none}.lineup-card:hover .mb{transform:rotate(-6deg)}}