:root{color-scheme:dark;--gold:#eeb956;--ink:#0a0c11;--line:#ffffff25}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:#06070b;color:#f8f5ee;font:14px/1.45 "Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif}
.shell{max-width:500px;margin:auto;background:var(--ink);min-height:100svh}
header{display:flex;align-items:center;gap:.45rem;padding:.55rem .55rem;background:#15171d;white-space:nowrap}
header strong{font-size:clamp(.95rem,4.6vw,1.15rem)}
.dot{display:inline-block;width:8px;height:8px;background:var(--gold);border-radius:50%;flex:none}
.pill{border:1px solid #d6a64b70;border-radius:999px;padding:.18rem .5rem;color:#ffe3a7;font-size:.72rem}
button{font:inherit;color:inherit;background:#232735;border:1px solid var(--line);border-radius:10px;min-height:44px;cursor:pointer}
button:focus-visible,.strip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button:disabled{opacity:.55;cursor:default}
.gate{padding:2rem 1rem;text-align:center}
.gate h1 span{color:var(--gold)}
.gate button{display:block;width:100%;margin:.65rem 0}
.wall-window{height:clamp(19rem,46svh,28rem);position:relative;overflow:hidden}
.wall-track{animation:rise 165s linear infinite}
.wall-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:0 2px 5px}
@keyframes rise{to{transform:translateY(-50%)}}
.tile{margin:0;position:relative;overflow:hidden;border-radius:12px;background:#232630;aspect-ratio:3/4}
.tile img,.mini img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block}
.tile figcaption{position:absolute;inset:auto 0 0;background:linear-gradient(transparent,#0a0a0df0);padding:1.1rem .5rem .45rem;font-weight:750}
.notes{position:absolute;inset:auto 3px .5rem;display:grid;gap:5px;pointer-events:none}
.note{min-height:50px;display:flex;align-items:center;gap:.55rem;padding:.32rem .55rem;border:1px solid var(--line);border-radius:10px;background:#171b25f2;box-shadow:0 3px 12px #0007;animation:appear .35s ease-out both}
.note img{width:36px;height:36px;object-fit:cover;border-radius:50%;border:1px solid #dcac57}
.note strong{font-size:.8rem}
.note small{color:var(--gold);margin-left:.4rem}
.note p{margin:0;font-size:.72rem;color:#e0d9d0}
@keyframes appear{from{opacity:0;transform:translateY(7px)}}
.panel{position:relative;border-radius:15px 15px 0 0;border-top:1px solid #66769b;background:linear-gradient(#151e33,#0c111d);padding:.85rem .5rem calc(.55rem + env(safe-area-inset-bottom));text-align:center}
.panel-tag{display:inline-block;background:#d79d40;color:#181009;border-radius:999px;font-weight:800;padding:.12rem .6rem;font-size:.7rem;margin-top:-1.5rem;vertical-align:top}
.panel h1{font-size:clamp(1rem,5vw,1.3rem);margin:0;font-weight:850}
.panel h1 em{font-style:normal;color:var(--gold)}
.intro,#download-error{font-size:.72rem;margin:.35rem 0;color:#c8c1b7}
.strip-heading{display:flex;align-items:center;justify-content:space-between;gap:.35rem;text-align:left}
.strip-heading h2{font-size:.8rem;margin:0}
#motion{min-height:36px;padding:.15rem .45rem;font-size:.67rem}
.strip{overflow:auto;scrollbar-width:thin;scrollbar-color:#796b56 transparent}
.strip-track,.mini-group{display:flex;width:max-content}
.mini-group{gap:5px;padding-right:5px}
.mini{width:56px;height:74px;border-radius:8px;overflow:hidden;background:#232630}
.gold{width:100%;border-radius:999px;border:1px solid #f7ce81;color:#251600;background:linear-gradient(120deg,#f3ca76,#d3963f);font-weight:850;min-height:48px}
.paused .wall-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.wall-track,.note{animation:none}}
.wall-scroll{height:100%;overflow:hidden}
.paused .wall-scroll{overflow-y:auto}
.paused .wall-track{animation:none}
.paused .wall-grid[aria-hidden=true]{display:none}
@media(prefers-reduced-motion:reduce){
  .wall-scroll{overflow-y:auto}
  .wall-grid[aria-hidden=true]{display:none}
  .note{animation:none}
}

.panel>.js-download{margin-top:.65rem}