:root{--bg:#030718;--ink:#edf1f7;--dim:#a9b6d0;--cap:#e8be3d;--tint:#4fb2ff;--gut:clamp(16px,3.2vw,48px)}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);font:500 17px/1.55 "M PLUS Rounded 1c",system-ui,sans-serif;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;overflow-x:hidden}
a{color:inherit}
h1,h2,p,ul,dl,dd,figure{margin:0;padding:0}
ul{list-style:none}
:focus-visible{outline:3px solid var(--cap);outline-offset:3px;border-radius:4px}
#scene{position:fixed;inset:0;width:100%;height:100%;image-rendering:pixelated;display:block}

/* the memory card */
.home{position:relative;min-height:100dvh;display:grid;grid-template-columns:minmax(300px,4fr) 8fr;gap:clamp(24px,4vw,64px);padding:var(--gut);align-items:center;transition:opacity .28s}
.intro h1{font-weight:800;font-size:clamp(46px,6.2vw,92px);line-height:1;letter-spacing:-.035em}
.lede{margin-top:32px;font-size:clamp(18px,1.5vw,22px);line-height:1.45;max-width:30ch}
.links{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:24px}
.links a{color:var(--dim);text-underline-offset:4px;transition:color .15s}
.links a:hover{color:var(--cap)}
.cardname{font-size:18px;font-weight:500;color:var(--dim);margin-bottom:12px;padding-left:12px}
.cardname span{color:var(--ink);font-weight:800;margin-left:8px}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(4px,1vh,12px) 8px}
.slot{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px 10px;text-decoration:none;text-align:center;border-radius:8px;transition:background .2s}
.ico{display:block;width:100%;height:clamp(84px,calc((100dvh - 190px) / 3),170px)}
.name{font-size:15px;line-height:1.25;color:var(--ink);transition:color .15s}
.slot:hover .name,.slot:focus-visible .name{color:var(--cap)}
.slot:hover,.slot:focus-visible{background:#ffffff0d}
.no3d .ico{display:grid;place-items:center;height:64px;font-size:30px;font-weight:800;color:var(--tint)}
.no3d .ico::before{content:attr(data-letter)}

/* a save, opened: :target does the work so this holds without script */
.save{display:none;position:fixed;inset:0;overflow:auto;padding:calc(var(--gut) + 56px) var(--gut) var(--gut);grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center;overscroll-behavior:contain}
.save:target{display:grid}
.save:has(.wide){grid-template-columns:minmax(0,1fr)}
body.open .home{opacity:0;visibility:hidden}
.save:target>*{animation:rise .42s cubic-bezier(.2,.8,.2,1) both}
.save:target>.screen{animation-delay:.08s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
.hold{height:clamp(110px,20vh,180px);width:clamp(110px,20vh,180px);margin:-12px 0 8px -16px}
.save h2{font-weight:800;font-size:clamp(38px,4.4vw,68px);line-height:1.02;letter-spacing:-.03em;outline:0}
.what{font-size:clamp(19px,1.6vw,24px);line-height:1.35;margin-top:12px;max-width:34ch}
.stats{color:var(--dim);margin-top:16px;font-size:16px}
.state{color:var(--tint);font-weight:800}
.stats b{font-weight:500}
.stats b::before{content:"\00b7";margin:0 8px}
.text>p:not(.what,.stats,.made){margin-top:16px;max-width:60ch}
.made{margin-top:12px;color:var(--dim);font-size:16px}
.go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:24px}
.go a{text-underline-offset:4px;transition:color .15s}
.go a:hover{color:var(--cap)}
.go .play{background:var(--cap);color:#14161d;padding:13px 26px;font-weight:800;text-decoration:none;transition:transform .12s,background .15s}
.go .play:hover{background:#fff;color:#14161d}
.go .play:active{transform:scale(.96)}
.screen{min-width:0}
.screen img,.screen video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#000}
.wide{max-width:980px;width:100%;margin:0 auto}
.last{display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:32px}
.last>*{grid-column:1}
.last .hold{grid-column:2;grid-row:1/6;width:100%;height:min(56vh,44vw);margin:0}
.last h2{font-size:clamp(54px,7vw,104px)}
.old{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px;margin-top:24px}
.old a{display:block;font-weight:800;text-underline-offset:4px}
.old a:hover{color:var(--cap)}
.old span{display:block;color:var(--dim);font-size:16px;line-height:1.35}
.status{margin-top:24px;display:grid;gap:10px;max-width:72ch}
.status div{display:grid;grid-template-columns:7em 1fr;gap:16px}
.status dt{color:var(--tint);font-weight:800}
.charm{position:absolute;top:0;right:clamp(16px,12vw,220px);width:90px;height:190px;transform:scale(1.5);transform-origin:50% 0}

/* the bar: back and step sit in the same place on every save */
.ctl{position:fixed;left:var(--gut);top:var(--gut);display:flex;align-items:center;gap:20px;z-index:3}
.ctl[hidden]{display:none}
.back{font-weight:800;text-underline-offset:4px;margin-right:8px}
.back::before{content:"\2190\00a0"}
.step,.sound{background:none;border:0;color:var(--dim);font:inherit;cursor:pointer;padding:6px 2px;transition:color .15s}
.step:hover,.sound:hover,.back:hover{color:var(--cap)}
.sound{position:fixed;right:var(--gut);top:calc(var(--gut) - 6px);z-index:3}

@media (max-width:860px){
  html{font-size:16px}
  .home{grid-template-columns:1fr;align-content:start;gap:16px;padding-top:max(var(--gut),env(safe-area-inset-top));min-height:100svh}
  .intro h1{font-size:40px;padding-right:88px}
  .lede{margin-top:12px;font-size:18px;line-height:1.4;max-width:none}
  .links{margin-top:10px}
  .cardname{padding-left:0;margin-bottom:4px;font-size:16px}
  .slots{grid-template-columns:repeat(3,1fr);gap:2px 0}
  .ico{height:clamp(68px,11.6svh,104px)}
  .name{font-size:14px}
  .sound{top:calc(var(--gut) + 2px)}
  .save,.save:has(.wide){grid-template-columns:minmax(0,1fr);align-content:start;gap:20px;padding:64px var(--gut) 12px}
  .hold{height:112px;width:112px;margin:0 0 4px -8px}
  .save h2{font-size:38px}
  .screen{grid-row:1;margin:0 calc(var(--gut) * -1)}
  .save:target>.screen{animation-delay:0s}
  .go{position:sticky;bottom:10px;gap:0 20px;z-index:2;padding-bottom:env(safe-area-inset-bottom)}
  .go .play{flex:1;text-align:center;padding:15px}
  .go a:not(.play){background:var(--bg);padding:6px 8px}
  .old{grid-template-columns:1fr}
  .last{grid-template-columns:1fr}
  .last .hold{grid-column:1;grid-row:auto;height:46vw;width:100%}
  .charm{right:8px;top:48px;transform:scale(.9)}
  .status div{grid-template-columns:1fr;gap:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}