:root{--sky:#E8EFF3;--haze:#F6F9FA;--ink:#22313A;--ink-soft:#5B6B75;--lake:#2B6E8C;--sun:#F2C14E;--hill:#A9C9A0;--line:#CBD7DD;--road:#3A4750;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--sky:#151B20;--haze:#1D252B;--ink:#E6EDF1;--ink-soft:#9AAAB4;--lake:#6FB3D2;--sun:#F2C14E;--hill:#6F9A6A;--line:#2E3A42;--road:#3A4750;color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--sky);color:var(--ink);font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 60,"opsz" 14;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--lake);text-underline-offset:3px}a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-weight:400;font-variation-settings:"SOFT" 100,"opsz" 144;line-height:1.05;margin:0}
h1{font-size:clamp(2rem,5vw,3.2rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:.5em}
h3{font-size:1.25rem;font-variation-settings:"SOFT" 100,"opsz" 48}
p{margin:0 0 1em;max-width:62ch}
.wrap{width:min(1200px,100% - 2*clamp(16px,4vw,48px));margin-inline:auto}

/* Top bar */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--sky) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:60px}
.brand{font-size:1.5rem;text-decoration:none;color:var(--ink);font-variation-settings:"SOFT" 100,"opsz" 72,"wght" 500;margin-inline-end:8px}
.tabs{display:flex;gap:4px}
.tabs button{font:inherit;font-size:.95rem;background:none;border:1px solid transparent;border-radius:999px;padding:6px 14px;color:var(--ink-soft);cursor:pointer}
.tabs button[aria-pressed=true]{background:var(--ink);color:var(--sky);border-color:var(--ink)}
.tabs button:hover{color:var(--ink)}
.top nav{margin-inline-start:auto;display:flex;align-items:center;gap:18px}
.top nav a{text-decoration:none;color:var(--ink-soft);font-size:.95rem}
.top nav a:hover{color:var(--ink);text-decoration:underline}
.top nav a.plus{color:var(--lake);font-variation-settings:"SOFT" 100,"opsz" 24,"wght" 500}
.signin{font:inherit;font-size:.95rem;background:var(--lake);color:var(--sky);border:0;border-radius:999px;padding:8px 16px;cursor:pointer;text-decoration:none}
.signin:hover{background:var(--ink);color:var(--sky)}
.who{display:flex;align-items:center;gap:8px;font-size:.95rem;color:var(--ink-soft)}
.who b{color:var(--ink);font-weight:500}
.who .badge{background:var(--sun);color:#22313A;border-radius:999px;padding:2px 9px;font-size:.8rem}
.who button{font:inherit;font-size:.85rem;background:none;border:0;color:var(--ink-soft);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lang{font:inherit;font-size:.9rem;color:var(--ink-soft);background:var(--sky);border:1px solid var(--line);border-radius:999px;padding:5px 10px;cursor:pointer;max-width:9.5em}
.lang:hover{color:var(--ink);border-color:var(--ink-soft)}
@media (max-width:760px){.tabs{display:none}.top nav{gap:10px}.top nav a.about{display:none}.lang{max-width:7em;font-size:.85rem;padding:4px 6px}.brand{font-size:1.35rem}}
[dir=rtl] body{font-family:"Fraunces","David Libre","Frank Ruhl Libre","Noto Serif Hebrew","Noto Naskh Arabic",Georgia,serif}
:lang(ja) body,:lang(ko) body,:lang(ja) h1,:lang(ja) h2,:lang(ko) h1,:lang(ko) h2{font-family:"Fraunces","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","Noto Serif KR","Apple SD Gothic Neo",serif}

/* Grid */
main{padding:22px 0 48px}
.strap{margin:0 0 22px;max-width:none;color:var(--ink);font-size:1.15rem;font-variation-settings:"SOFT" 100,"opsz" 48}
.strap .strap2{color:var(--ink-soft)}
@media (max-width:760px){.strap{font-size:1.02rem;margin-bottom:16px}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px 24px;list-style:none;margin:0;padding:0}
.tile{display:block;text-decoration:none;color:var(--ink);transition:transform .22s ease}
.tile:not(.soon):hover{transform:translateY(-3px)}
.tile .thumb{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--line);position:relative;box-shadow:0 1px 0 rgba(34,49,58,.06);transition:box-shadow .22s ease,border-radius .22s ease}
.tile:not(.soon):hover .thumb{box-shadow:0 12px 28px -10px rgba(34,49,58,.35);border-radius:10px}
.tile .thumb::after{content:"";position:absolute;inset-inline-end:10px;bottom:10px;width:30px;height:30px;border-radius:50%;background:rgba(246,249,250,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 4.5v11l9-5.5z' fill='%2322313A'/%3E%3C/svg%3E") center/16px no-repeat;opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s;pointer-events:none}
.tile:not(.soon):hover .thumb::after{opacity:1;transform:scale(1)}
.tile .thumb img,.tile .thumb svg{display:block;width:100%;height:100%;object-fit:cover}
.tile .thumb .preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.tile .thumb .preview.on{opacity:1}
@media (prefers-reduced-motion:reduce){.tile .thumb .preview{display:none}}
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:8px 0 32px}
.strip img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.tile .thumb .tag{position:absolute;inset-inline-start:10px;bottom:10px;background:rgba(34,49,58,.82);color:#F6F9FA;font-size:.78rem;padding:3px 9px;border-radius:999px}
.tile.soon .thumb{opacity:.6;outline:2px dashed var(--line);outline-offset:-2px;filter:saturate(.7)}
.tile.soon .name,.tile.soon .sub{color:var(--ink-soft)}
.tile.soon .thumb .tag{background:rgba(91,107,117,.85)}
.tile .meta{padding:10px 2px 0}
.tile .name{font-size:1.15rem;font-variation-settings:"SOFT" 100,"opsz" 48,"wght" 500;line-height:1.2}
.tile .sub{color:var(--ink-soft);font-size:.92rem;margin-top:3px}
.tile:hover .name{text-decoration:underline;text-underline-offset:3px}
.tile.soon{cursor:default}.tile.soon:hover .name{text-decoration:none}
.grid[data-filter=games] li[data-kind=sim],.grid[data-filter=sims] li[data-kind=game]{display:none}
.empty{color:var(--ink-soft);padding:40px 0}

/* Inner pages */
.page{padding:40px 0 56px}
.page .wrap{width:min(760px,100% - 2*clamp(16px,4vw,48px))}
.page .updated{color:var(--ink-soft);margin:4px 0 1.5em}
.page h2{font-size:1.3rem;font-variation-settings:"SOFT" 100,"opsz" 48;font-weight:500;margin:1.8em 0 .4em}
.scene{display:block;width:100%;height:auto;border-radius:18px;margin:8px 0 28px}
.balloon{animation:drift 9s ease-in-out infinite alternate;transform-origin:1010px 150px}
@keyframes drift{from{transform:translate(0,0) rotate(-1.5deg)}to{transform:translate(-40px,-14px) rotate(1.5deg)}}
@media (prefers-reduced-motion:reduce){.balloon{animation:none}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media (max-width:720px){.two{grid-template-columns:1fr}}
.cta{display:inline-block;background:var(--lake);color:var(--sky);text-decoration:none;padding:13px 22px;border-radius:999px;font-size:1.05rem;font-variation-settings:"SOFT" 100,"opsz" 24,"wght" 500;border:0;font-family:inherit;cursor:pointer}
.cta:hover{background:var(--ink);color:var(--sky)}
.cta[disabled]{background:var(--line);color:var(--ink-soft);cursor:default}
.quiet{color:var(--ink-soft);font-size:.95rem}
.price{font-size:2.4rem;font-variation-settings:"SOFT" 100,"opsz" 144;line-height:1;margin:.3em 0 .1em}
.includes{list-style:none;padding:0;margin:1em 0 1.5em}
.includes li{padding:8px 0;border-bottom:1px solid var(--line)}
.includes li:first-child{border-top:1px solid var(--line)}
.status{margin:1.2em 0;padding:14px 16px;border-radius:10px;background:var(--haze);border:1px solid var(--line)}

footer{padding:36px 0 52px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:.95rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}

/* Game pages */
.page.game .wrap{width:min(1000px,100% - 2*clamp(16px,4vw,48px))}
.crumb{margin:0 0 14px;font-size:.95rem}.crumb a{text-decoration:none;color:var(--ink-soft)}.crumb a::before{content:"← "}[dir=rtl] .crumb a::before{content:"→ "}
.hero{display:grid;grid-template-columns:3fr 2fr;gap:28px;align-items:center;margin-bottom:22px}
.hero .media{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--line);box-shadow:0 12px 30px -14px rgba(34,49,58,.4)}
.hero .media video,.hero .media img{display:block;width:100%;height:100%;object-fit:cover}
.hero .media .tag{position:absolute;inset-inline-start:12px;bottom:12px;background:rgba(34,49,58,.82);color:#F6F9FA;font-size:.8rem;padding:3px 10px;border-radius:999px}
.hero h1{font-size:clamp(2rem,4.5vw,3rem)}
.hero .lead{font-size:1.1rem;color:var(--ink-soft);margin:.5em 0 1em}
.cta.play{font-size:1.15rem;padding:14px 26px}
.by{margin-top:1.2em}
.long{font-size:1.08rem;max-width:72ch;margin:0 0 26px}
.list{padding-inline-start:1.2em;margin:0 0 1em}.list li{margin:.35em 0}
.page.game .two{margin-top:8px}
.pricetag{font-size:1.3rem;color:var(--ink);font-variation-settings:"SOFT" 100,"opsz" 48,"wght" 500}
.tile+.details{display:inline-block;margin:4px 2px 0;font-size:.85rem;color:var(--ink-soft);text-decoration:none}
.tile+.details:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.chips{display:none;gap:8px;margin:-6px 0 18px}
.chips button{font:inherit;font-size:.9rem;background:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px;color:var(--ink-soft);cursor:pointer}
.chips button[aria-pressed=true]{background:var(--ink);color:var(--sky);border-color:var(--ink)}
@media (max-width:760px){.chips{display:flex}.hero{grid-template-columns:1fr;gap:16px}}
.cta.play::after{content:" \2192"}[dir=rtl] .cta.play::after{content:" \2190"}
@media (min-width:761px){.page.game .strip{grid-template-columns:repeat(5,1fr)}}
[dir=rtl] .page.game .two>div{text-align:start}
[dir=rtl] .long,[dir=rtl] .list{text-align:left}