:root { color-scheme:dark; background:#141517; }
* { box-sizing:border-box }
body,figure { margin:0 }
main { position:relative; isolation:isolate; display:grid; grid-template-rows:minmax(0,1fr) auto; justify-items:center; height:100vh; height:100svh; overflow:hidden; padding:clamp(16px,4vh,54px) clamp(14px,5vw,90px) max(16px,env(safe-area-inset-bottom)); gap:clamp(14px,2.5vh,28px); }
#glow { position:absolute; z-index:-2; inset:-12%; background:radial-gradient(ellipse at 50% 20%,#616b70,#262c32 45%,#151518 85%) center/cover; filter:blur(55px) saturate(.78) brightness(.52); }
main::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 50% 45%,transparent 26%,#0c0e143b 70%,#080a105e); }
figure { width:100%; min-height:0; display:flex; align-items:center; justify-content:center; }
#art { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:5px; box-shadow:0 24px 76px #0006,0 0 0 1px #ffffff1c; animation:appear .32s ease-out; }
nav { display:flex; align-items:center; border:1px solid #ffffff35; border-radius:32px; padding:3px 5px; background:#171a1dd1; box-shadow:inset 0 1px 0 #ffffff12,0 6px 20px #0003; }
nav button,nav a { display:grid; place-items:center; width:50px; height:43px; border:0; border-radius:25px; background:none; color:#fff; cursor:pointer; }
nav :is(button,a):hover { background:#ffffff18 } nav :focus-visible { outline:2px solid #fff; }
.divider { height:15px; width:1px; background:#ffffff38; }
.die { position:relative; width:21px; height:21px; border:1.6px solid; border-radius:5px; transform:rotate(-13deg); }
.die i { position:absolute; width:3px; height:3px; top:7.4px; left:7.4px; border-radius:50%; background:currentColor; box-shadow:-4px -4px,4px 4px,-4px 4px,4px -4px }
[aria-busy=true] .die { animation:roll .9s ease-in-out infinite; }
.arrow { width:14px; height:14px; position:relative; border-top:1.6px solid; border-right:1.6px solid; }
.arrow::after { content:""; position:absolute; top:-1px; right:0; width:18px; height:1.6px; background:currentColor; transform-origin:right center; transform:rotate(-45deg); }
.sr { position:absolute; width:1px; height:1px; clip-path:inset(100%); overflow:hidden; }
[hidden],nav:has(a[hidden]) .divider { display:none!important; }
@keyframes roll { to {transform:rotate(167deg)} } @keyframes appear {from{opacity:.25; transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){*,*::after{animation:none!important}}
nav svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
#ratings { inset:auto 0 calc(max(16px,env(safe-area-inset-bottom)) + 58px); margin:0 auto; width:max-content; padding:3px 5px; border:1px solid #ffffff35; border-radius:30px; background:#171a1df5; color:white; }
#ratings:popover-open { display:grid; gap:4px; padding:6px; border-radius:25px }
#ratings [role=group] { display:flex; gap:2px }
#ratings [role=group] + [role=group] { border-top:1px solid #ffffff24; padding-top:4px }
#ratings [data-category][aria-pressed=true] { background:#304841; color:#b4f2df }
#ratings [aria-pressed=true] { background:#9de9dc; color:#132b31 }
#ratings button:disabled { opacity:.35; cursor:default }
#ratings button { width:72px; min-height:44px; font:600 13px/1 system-ui,sans-serif; letter-spacing:.04em }
#filter[data-rating=adult] { color:#ffabc0 }

@media (pointer:coarse), (max-width:600px) {
  main {
    height:100dvh;
    padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    gap:8px;
  }
  figure { min-width:0; touch-action:pan-y pinch-zoom }
  nav button,nav a { width:54px; height:48px; touch-action:manipulation }
  #ratings { bottom:calc(max(12px,env(safe-area-inset-bottom)) + 64px) }
}
@media (orientation:landscape) and (max-height:550px) and (pointer:coarse) {
  main { grid-template: minmax(0,1fr) / minmax(0,1fr) auto; align-items:center }
  figure { height:100% }
  nav { flex-direction:column; padding:5px 3px }
  .divider { height:1px; width:18px }
  #ratings {
    inset:50% calc(max(8px,env(safe-area-inset-right)) + 70px) auto auto;
    transform:translateY(-50%);
  }
}

#history-panel {
  inset:auto 0 calc(max(16px,env(safe-area-inset-bottom)) + 64px);
  margin:0 auto; padding:9px; width:min(390px,calc(100vw - 24px));
  max-height:min(52dvh,380px); overflow:auto; overscroll-behavior:contain;
  background:#171a1df5; border:1px solid #ffffff35; border-radius:20px;
}
#history-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px }
#history-grid button { width:100%; height:auto; aspect-ratio:1; padding:0; overflow:hidden; border-radius:9px; background:#303437 }
#history-grid img { width:100%; height:100%; object-fit:cover }
#history-grid button:focus-visible { outline-offset:-3px }
#history-empty { margin:12px; text-align:center; font:14px system-ui,sans-serif; color:#d6dadb }
@media (orientation:landscape) and (max-height:550px) and (pointer:coarse) {
  #history-panel { inset:50% calc(max(8px,env(safe-area-inset-right)) + 70px) auto auto; transform:translateY(-50%); max-height:80dvh; width:min(390px,65vw) }
}