* { box-sizing: border-box; }
body { background:#1a1230; color:#eee; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; margin:0; padding:12px; padding-bottom: env(safe-area-inset-bottom); -webkit-text-size-adjust:100%; }
h1 { font-size:16px; margin:0 0 10px; }
#wrap { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:10px; }
.card { background:#2a1a4a; border:1px solid #553; padding:8px; border-radius:6px; }
.head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.no { font-weight:bold; font-size:14px; }
.rank { padding:2px 6px; border-radius:4px; font-size:11px; color:inherit; font-family:inherit; border:0; cursor:pointer; min-height:28px; }
.rank:focus-visible { outline:2px solid #9ddcff; outline-offset:3px; }
#conditions-dialog { width:min(420px, calc(100vw - 24px)); max-height:calc(100dvh - 32px); padding:16px; border:1px solid #80629b; border-radius:12px; background:#2a1a4a; color:#eee; box-shadow:0 12px 48px #0008; overflow:auto; }
#conditions-dialog::backdrop { background:rgba(0,0,0,0.65); }
.conditions-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.conditions-header h2 { font-size:16px; margin:0; }
#conditions-close { padding:8px 12px; border:1px solid #80629b; border-radius:6px; background:#44305e; color:#eee; cursor:pointer; }
body:has(#conditions-dialog[open]) { overflow:hidden; }
.rank-normal { background:#555; }
.rank-a { background:#06a; }
.rank-s { background:#a50; }
.rank-ss { background:#a05; }
.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:2px; background:#000; padding:2px; }
.reel { display:flex; flex-direction:column; gap:1px; aspect-ratio: 118 / 155; min-height:0; overflow:hidden; }
.reel:not(.state) { cursor:pointer; }
.reel.state { align-items:center; justify-content:center; color:white; font-weight:bold; font-size:12px; text-align:center; padding:2px; line-height:1.2; }
#modal { position:fixed; inset:0; background:rgba(0,0,0,0.75); display:none; align-items:center; justify-content:center; z-index:100; padding:12px; }
#modal.show { display:flex; }
.modal-box { background:#2a1a4a; border:1px solid #664; border-radius:8px; padding:10px; max-height:100%; max-width:100%; display:flex; flex-direction:column; align-items:center; }
.modal-title { font-size:13px; margin:0 0 6px; text-align:center; }
.modal-reel {
  --ch: min(calc((100vh - 110px) / 20), calc((100vw - 60px) * 51 / 118));
  display:flex; flex-direction:column;
  width: calc(var(--ch) * 118 / 51);
}
.mcell { position:relative; height: var(--ch); background:#d4ebf5; border-bottom:1px solid #fff; filter:brightness(0.25); transition:filter 0.15s; }
.mcell img { width:100%; height:100%; object-fit:contain; display:block; }
.mcell .mpos { position:absolute; top:1px; left:2px; font-size:9px; color:#333; background:rgba(255,255,255,0.7); padding:0 3px; border-radius:2px; }
.mcell.hl { filter:none; box-shadow:0 0 0 1px #fc0; z-index:1; }
.modal-close { margin-top:8px; padding:6px 16px; background:#553; color:#eee; border:0; border-radius:4px; cursor:pointer; font-size:13px; }
.cell { position:relative; aspect-ratio: 118/51; background:#d4ebf5; }
.cell.blank { background:#fff; }
.cell img { width:100%; height:100%; object-fit:contain; display:block; }
.cell .pos { position:absolute; top:0; left:2px; font-size:9px; color:#333; background:rgba(255,255,255,0.7); padding:0 2px; border-radius:2px; }
.links { font-size:11px; margin-top:6px; display:flex; gap:10px; }
.links a { color:#8cf; }
.conditions { margin-top:8px; padding-top:8px; border-top:1px solid #645078; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.conditions a { color:#9ddcff; }
.push { display:inline-block; font-size:11px; margin-top:6px; padding:2px 6px; background:#7a4; color:#fff; border-radius:3px; }
.done-wrap { display:flex; align-items:center; gap:5px; cursor:pointer; user-select:none; }
.done-wrap input { width:16px; height:16px; accent-color:#7a4; cursor:pointer; margin:0; }
.card.is-done { opacity:0.55; background:#1f1538; }
.card.is-done .grid { filter:grayscale(0.4); }
#actions { display:flex; gap:8px; margin-left:auto; }
#actions button { font-size:11px; padding:3px 8px; background:#443; color:#ccc; border:1px solid #665; border-radius:3px; cursor:pointer; }
#sticky-top { position:sticky; top:0; z-index:10; margin:-12px -12px 12px; background:#221238; border-bottom:1px solid #443; }
#picker-wrap { padding:10px; border-bottom:1px solid #443; }
.picker-label { font-size:11px; color:#aaa; margin-bottom:4px; text-align:center; }
.picker { position:relative; width:140px; margin:0 auto; }
.picker-scroll { height:calc(60px * 3); overflow-y:scroll; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.picker-scroll::-webkit-scrollbar { display:none; }
.pcell { height:60px; scroll-snap-align:start; scroll-snap-stop:always; background:#d4ebf5; border-bottom:1px solid #fff; display:flex; align-items:center; justify-content:center; }
.pcell img { width:100%; height:100%; object-fit:contain; }
.picker-window { position:absolute; top:0; left:-4px; right:-4px; height:calc(60px * 3); border:2px solid #fc0; border-radius:4px; pointer-events:none; box-shadow:0 0 0 9999px rgba(0,0,0,0.35) inset; box-sizing:content-box; }
.picker-info { text-align:center; font-size:12px; color:#ccc; margin-top:6px; font-family:monospace; }
.picker-toggle { text-align:center; font-size:12px; color:#ccc; margin-top:4px; }
.picker-toggle input { vertical-align:-2px; margin-right:4px; accent-color:#fc0; }
#picker-wrap.off .picker { opacity:0.4; }
#filter { padding:8px 10px 10px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
#filter label { display:flex; align-items:center; gap:6px; font-size:13px; }
#filter select { font-size:14px; padding:4px 6px; background:#332255; color:#eee; border:1px solid #665; border-radius:4px; max-width:60vw; }
#count { font-size:12px; color:#aaa; margin-left:auto; }
@media (max-width: 480px) {
  body { padding:8px; }
  h1 { font-size:14px; }
  #wrap { grid-template-columns: 1fr 1fr; gap:8px; }
  .card { padding:6px; }
  .head { margin-bottom:4px; }
  .no { font-size:12px; }
  .rank { font-size:10px; padding:1px 4px; }
  #sticky-top { margin:-8px -8px 10px; }
  #picker-wrap { padding:8px; }
  #filter { padding:6px 8px 8px; gap:6px 8px; }
  #filter label { font-size:12px; }
}