/* gallery.mossandbits.games. Tokens match the island homepage (site/style.css). */
:root{--paper:#faeed3;--ink:#234731;--muted:#687452;--line:#cdd0ac;--leaf:#71964a;--serif:Georgia,serif;--sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans);color:var(--ink);background:radial-gradient(ellipse at 50% 0,#fff6df,transparent 60%),var(--paper);font-synthesis:none;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:3px solid #8050ad;outline-offset:4px}
.skip{position:fixed;top:-70px;left:20px;z-index:20;background:var(--ink);color:var(--paper);padding:14px}
.skip:focus{top:8px}

.masthead{padding:18px 3vw;display:flex;justify-content:space-between;align-items:center;gap:20px;position:relative;z-index:2}
.studio-name{display:flex;align-items:center;gap:9px;font-weight:740;letter-spacing:-.04em;font-size:17px}
.studio-name svg{width:24px;height:24px}
.masthead nav{display:flex;gap:24px;font-size:12px}
.masthead nav a{padding:10px 0}
.masthead nav a[aria-current]{font-weight:750}

.intro{text-align:center;padding:0 24px;position:relative;z-index:2}
.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:9px;font-weight:650;margin:8px 0}
.status-dot{display:inline-block;width:6px;height:6px;background:var(--leaf);border-radius:50%;margin-right:7px}
h1{font:700 clamp(36px,5.4vw,68px)/1 var(--serif);letter-spacing:-.04em;margin:12px auto 10px}
.tagline{font:italic clamp(16px,2vh,22px) var(--serif);margin:0}

/* floating bits, like the island page */
.bits{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bits i{position:absolute;width:7px;height:7px;border:1.5px solid var(--c);background:color-mix(in srgb,var(--c) 35%,transparent);opacity:.8;animation:float-bit 6s ease-in-out infinite}
.bits i:nth-child(2n){animation-delay:-3s;animation-duration:7.5s;width:5px;height:5px}
.bits i:nth-child(3n){animation-delay:-1.5s;width:9px;height:9px}
@keyframes float-bit{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px) rotate(8deg)}}

/* hero painting with one hotspot per jar */
.hero{position:relative;width:min(1500px,100%);margin:-2vw auto 0}
.hero img{width:100%}
.spot{position:absolute;top:31%;height:45%;border-radius:40% 40% 16% 16%;transition:transform .3s,filter .3s}
.spot:hover,.spot:focus-visible{transform:translateY(-6px);filter:drop-shadow(0 10px 14px #526c3c33);background:radial-gradient(#fff5c844,transparent 65%)}

/* shelves */
.shelf{max-width:1240px;margin:70px auto 0;padding:0 4vw;position:relative}
.shelf>header{text-align:center;margin-bottom:26px}
.shelf h2{font:700 clamp(28px,3.4vw,44px)/1 var(--serif);letter-spacing:-.04em;margin:6px 0 8px}
.jars{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:34px 22px;list-style:none;margin:0;padding:0}
.jar{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;width:100%}
.jar .pic{width:100%;max-width:220px;aspect-ratio:2/3;transition:transform .35s}
.jar .pic img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse 52% 50% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 52% 50% at 50% 50%,#000 72%,transparent 100%)}
.jar:hover .pic,.jar:focus-visible .pic{transform:translateY(-8px) rotate(-1.5deg)}
.jar small{text-transform:uppercase;letter-spacing:.12em;font-size:9px;color:var(--muted)}
.jar strong{font:700 21px/1.1 var(--serif);letter-spacing:-.035em}
.jar .one{font-size:12.5px;line-height:1.5;max-width:24em;margin:2px 0 4px}
.chips{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.chips span{font-size:10px;padding:3px 8px;border:1px solid var(--line);border-radius:99px;background:#fffaf0}
.chips .new{background:var(--leaf);color:#fff;border-color:var(--leaf)}
.growing .chips span{border-style:dashed}

/* game card, same look as the island page dialogs */
dialog{border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);padding:0;width:min(860px,92vw);max-height:90dvh;overflow:auto}
dialog::backdrop{background:#1f342ab3}
.card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.card .side{background:#f3e4c2;display:grid;place-items:center;align-content:center;padding:34px 26px;gap:14px}
.card .side .jarimg{width:150px;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse 52% 50% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 52% 50% at 50% 50%,#000 70%,transparent 100%)}
.shot{position:relative;margin:0;border-radius:14px;overflow:hidden;border:5px solid #fffaf0;box-shadow:0 1px 0 var(--line),0 14px 26px #526c3c26;background:#111;width:100%}
.shot img{width:100%;max-height:300px;object-fit:contain;margin:0 auto}
.shot figcaption{position:absolute;left:8px;bottom:8px;background:var(--paper);font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:4px 8px;border-radius:99px}
.card .body{padding:42px 40px}
.card h3{font:700 34px/1 var(--serif);letter-spacing:-.04em;margin:8px 0 14px}
.card p{font-size:14px;line-height:1.75;margin:0 0 12px}
.card .sell{font:italic 18px/1.5 var(--serif);border-left:3px solid var(--leaf);padding-left:14px;margin:18px 0}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:12px;margin:20px 0}
.card dt{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:9px;padding-top:3px}
.card dd{margin:0}
.links{display:grid;gap:4px;margin-top:20px}
.links a{padding:11px 0;border-bottom:1px solid var(--line);font-size:13px;display:flex;justify-content:space-between}
.links .soon{padding:11px 0;font-size:13px;color:var(--muted)}
.close{position:absolute;right:12px;top:8px;font-size:28px;min-width:44px;min-height:44px}

footer{border-top:1px solid var(--line);margin:80px 3vw 0;padding:14px 0 max(18px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:10px;color:var(--muted)}
footer>span:first-child{color:var(--ink)}
footer>span:first-child span{margin:0 7px}

.motion-toggle{font-size:10px;min-height:44px;color:var(--muted)}
footer{align-items:center}
body.paused *{animation-play-state:paused!important}

@media (max-width:760px){
 .masthead{padding:14px 5vw}
 .studio-name{font-size:15px;white-space:nowrap}
 .masthead nav{gap:14px;font-size:11px;white-space:nowrap}
 .masthead nav a:first-child{display:none}
 .card .side{padding:22px 18px}
 .card .side .jarimg{width:96px}
 .card{grid-template-columns:1fr}
 .card .body{padding:28px 24px}
 .spot{display:none}
 .jars{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px}
 .jar .one{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}