/* pages.css: component classes for generated tuper.app pages (shop, maps, templates, games, tools).
   Loaded after /tuper.css; uses only its variables. */
.small{font-size:13px}
.prose.wide{max-width:1040px}
.buy{display:inline-flex;align-items:center;justify-content:center;background:var(--acc);color:var(--bg);min-height:46px;padding:10px 22px;text-align:center;line-height:1.3;font-weight:600;margin:8px 10px 8px 0;transition:background-color 160ms}
.buy:hover,.prose a.buy:hover{background:var(--acc2);color:var(--bg)}
.prose a.buy{color:var(--bg)}
.btn,.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;font:500 15px var(--mono);border:0;cursor:pointer;background:var(--acc);color:var(--bg)}
.btn:hover{background:var(--acc2);color:var(--bg)}
.p{background:var(--glass);border:1px solid var(--line2);padding:16px 20px;margin:14px 0}
.p h3{margin:0;font-size:17px}
.p p{margin:8px 0 0;color:var(--mut);font-size:14px}
.bn{background:var(--acc-t);border:1px solid var(--acc);padding:16px 20px;margin:20px 0}
.bn h2,.bn h3{margin:0 0 8px}
.x li{margin:6px 0}
.prose .hero{padding:0;margin:8px 0 20px}
.prose .hero .v{font-size:17px;margin:8px 0 18px;color:var(--mut)}
.prose .hero .alt{display:inline-block;margin:8px 0;font-weight:600}
.g{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.th{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:14px}
.th a{font-size:13px}
.th img{display:block;aspect-ratio:1;object-fit:contain;background:#faf7f0;width:100%}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:16px;margin:20px 0}
.gcard{background:var(--glass);border:1px solid var(--line2);overflow:hidden;transition:border-color 160ms}
.gcard:hover{border-color:rgba(255,122,98,.5)}
.gcard img{display:block;width:100%;height:auto;aspect-ratio:16/9}
.gcard div{padding:12px 16px}
.gcard h3{margin:0;font-size:16px}.gcard p{margin:4px 0 0;color:var(--mut);font-size:13.5px}
.gcard h3 a{color:var(--ink)}
.frame{position:relative;width:100%;aspect-ratio:16/10;max-height:78vh;background:#000;overflow:hidden;margin:20px 0 8px}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
form.nl{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
form.nl input[type=email]{flex:1 1 14rem;min-height:46px}
form.nl button{min-height:46px;padding:0 20px;border:0;background:var(--acc);color:var(--bg);font:500 15px var(--mono);cursor:pointer}
.hp{position:absolute;left:-9999px}
.ok{display:none;background:rgba(74,222,128,.1);color:var(--ok);padding:12px 16px}
.ok:target{display:block}
.prose .tag{font-size:12px}
@media (max-width:620px){.g{grid-template-columns:1fr}.prose .hero .buy{display:flex;margin-right:0}.prose{padding-top:32px}}
/* links inside sentences are underlined so they do not rely on colour alone (Lighthouse link-in-text-block) */
.prose p a:not(.buy):not(.alt):not(.bn),.prose li a:not(.buy):not(.alt):not(.bn){text-decoration:underline;text-underline-offset:2px}