/* Cozy Idle Shops — shared styles for the hub and every game page. */
:root{
 --paper:#fbf6ea;--cream:#f3ead7;--ink:#2d2a22;--muted:#6f6656;--line:#e2d6bb;--green:#3f5b45;--accent:var(--green);--gold:#e7a13b;--terra:#c8643b;
 --radius:22px;--shadow:0 10px 30px #3b2f1622;
 --head:'Fraunces','Be Vietnam Pro',Georgia,serif;
 --body:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI','Noto Sans','Hiragino Sans','PingFang SC','Apple SD Gothic Neo','Noto Sans Thai',sans-serif;
}
:lang(ja),:lang(ko),:lang(zh-Hans),:lang(zh-Hant),:lang(th),:lang(ru){--head:var(--body)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.6 var(--body)}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--head);line-height:1.15;margin:0 0 .5em;color:var(--green)}
h2{font-size:clamp(1.4rem,3.5vw,2rem)}
h3{font-size:1.08rem;font-family:var(--body);font-weight:800}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;padding:10px max(16px,env(safe-area-inset-left));background:#fbf6eaf0;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;text-decoration:none;white-space:nowrap}
.crumbs{flex:1;min-width:0;display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.9rem;white-space:nowrap;overflow:hidden}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.crumbs b{color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.lang select{font:inherit;font-size:.9rem;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink)}

.hero{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;background:var(--art) center/cover no-repeat;isolation:isolate}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#1f1a10d9 0%,#1f1a1099 38%,#1f1a1000 70%),linear-gradient(0deg,#1f1a10b3 0%,#1f1a1000 45%)}
.hero-text{max-width:620px;padding:clamp(28px,6vw,72px) max(16px,5vw);color:#fff8ea}
.hero h1{color:#fff;font-size:clamp(2.4rem,7vw,4.4rem);text-shadow:0 2px 18px #0006}
.hero .lead{font-size:clamp(1.1rem,2.4vw,1.35rem);font-weight:600}
.hero-icon{width:88px;height:88px;border-radius:22px;box-shadow:0 8px 24px #0005;margin-bottom:16px;border:3px solid #fff8}
.hint{font-size:.85rem;opacity:.85;margin:.6em 0 0}
.facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:18px 0 0}
.facts li{background:#fff2;border:1px solid #fff5;border-radius:999px;padding:4px 12px;font-size:.85rem;font-weight:700;backdrop-filter:blur(4px)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--gold);color:#3a2306;font-weight:800;text-decoration:none;border-radius:999px;padding:10px 20px;box-shadow:0 4px 0 #b9761f,0 8px 18px #0003;transition:transform .12s,box-shadow .12s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #b9761f}
.btn.big{font-size:1.15rem;padding:15px 30px;margin-top:10px}

.wrap{max-width:1120px;margin:0 auto;padding:clamp(32px,5vw,56px) max(16px,4vw) 0}
.intro{font-size:1.08rem;max-width:820px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:20px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card-art img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .3s}
.card-art{overflow:hidden}.card:hover .card-art img{transform:scale(1.03)}
.card-body{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 16px}
.card-icon{width:52px;height:52px;border-radius:14px}
.card h3{margin:0}.card h3 a{text-decoration:none}.card p{margin:2px 0 0;font-size:.88rem;color:var(--muted);line-height:1.4}
.cards.featured>.card:first-child{grid-column:1/-1}
@media (min-width:760px){
 .cards.featured>.card:first-child{display:grid;grid-template-columns:1.35fr 1fr}
 .cards.featured>.card:first-child .card-art img{height:100%;aspect-ratio:auto}
 .cards.featured>.card:first-child .card-body{grid-template-columns:auto 1fr;align-content:center;padding:28px;gap:16px 18px}
 .cards.featured>.card:first-child .card-body>div{grid-column:2}
 .cards.featured>.card:first-child .card-icon{width:72px;height:72px;border-radius:18px;grid-row:1}
 .cards.featured>.card:first-child h3{font-family:var(--head);font-size:1.9rem}
 .cards.featured>.card:first-child p{font-size:1rem}
 .cards.featured>.card:first-child .btn{grid-column:1/-1;justify-self:start;font-size:1.05rem;padding:13px 28px}
}
.soon{color:var(--muted);font-style:italic}

.grid3,.grid4{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.grid4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid4{grid-template-columns:1fr}}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px 18px 8px}
.tile p{color:var(--muted);margin:.2em 0 .8em;font-size:.95rem}

.shots{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 16px;-webkit-overflow-scrolling:touch}
.shot{flex:0 0 auto;scroll-snap-align:start}
.shot img{width:min(62vw,240px);height:auto;aspect-ratio:390/844;object-fit:cover;border-radius:20px;border:4px solid #fff;box-shadow:var(--shadow)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media (max-width:820px){.two{grid-template-columns:1fr}}
.howto{padding-left:1.3em}.howto li{margin:.5em 0}
details{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:0 0 10px}
summary{font-weight:800;cursor:pointer}
details p{margin:.6em 0 0;color:var(--muted)}
.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 0}
.meta div{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.meta dt{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.meta dd{margin:0;font-weight:700;font-size:.92rem}
@media (max-width:520px){.meta{grid-template-columns:1fr}}
.cta{text-align:center}

.foot{margin-top:64px;padding:28px max(16px,4vw) calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper);color:var(--muted);font-size:.9rem;text-align:center}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}

@media (max-width:640px){
 .crumbs{display:none}
 .topbar{justify-content:space-between}
 .hero{min-height:88vh}
 .hero::after{background:linear-gradient(0deg,#1f1a10f0 0%,#1f1a10b0 50%,#1f1a1030 85%)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}