/* ---------- deck: instant nav + arrows ---------- */
html{background:var(--paper,#f4f0e7);}

.deck-nav{
  position:fixed;right:22px;bottom:20px;display:flex;gap:9px;z-index:50;
}
.deck-nav button{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--rule,#ddd7c8);
  background:rgba(255,255,255,.82);
  color:var(--ink-2,#2b2926);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.deck-nav button:hover{background:var(--accent,#f0521c);border-color:var(--accent,#f0521c);color:#fff;}
.deck-nav button[disabled]{opacity:.3;cursor:default;background:rgba(255,255,255,.6);color:var(--muted,#9c968a);}
.deck-nav button[disabled]:hover{border-color:var(--rule,#ddd7c8);}
.deck-nav svg{width:16px;height:16px;}

/* ---------- hover menu on the counter (top left) ---------- */
.rank-nav{position:relative;display:inline-flex;align-items:baseline;}
.rank-trigger{
  cursor:pointer;user-select:none;padding:2px 6px;margin-left:-6px;border-radius:5px;
  transition:background .14s ease,color .14s ease;
}
.rank-nav:hover .rank-trigger,
.rank-nav:focus-within .rank-trigger{background:var(--accent,#f0521c);color:#fff;outline:none;}
.cnt-total{padding-left:2px;}

.rank-dropdown{
  display:none;position:absolute;top:100%;left:-10px;margin-top:10px;
  background:#fff;border:1px solid var(--rule,#ddd7c8);
  border-radius:12px;padding:12px;
  box-shadow:0 22px 44px -14px rgba(40,32,20,.32), 0 6px 16px -8px rgba(40,32,20,.16);
  z-index:100;min-width:236px;
  font-family:'Inter',-apple-system,system-ui,sans-serif;
}
.rank-nav:hover .rank-dropdown,
.rank-nav:focus-within .rank-dropdown{display:block;}
/* keeps the menu alive while the pointer travels down to it */
.rank-dropdown::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;}

.rd-label{
  display:block;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted,#9c968a);margin-bottom:8px;
}
.rd-label-2{margin-top:12px;padding-top:11px;border-top:1px solid #efece3;text-transform:none;letter-spacing:.02em;font-size:11px;color:#8d8677;}

.rd-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;}
.rank-item{
  display:flex;align-items:center;justify-content:center;height:30px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;font-weight:500;
  letter-spacing:.05em;color:var(--ink-2,#2b2926);text-decoration:none;border-radius:6px;
  background:#f7f4ec;transition:background .14s ease,color .14s ease;
}
.rank-item:hover{background:var(--ink,#161514);color:#fff;}
.rank-item.active{background:var(--accent,#f0521c);color:#fff;}
.rank-item.empty{background:transparent;color:#cfc8b8;cursor:default;}

.rd-pages{display:flex;flex-direction:column;gap:2px;}
.page-item{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;
  font-size:13px;color:var(--ink-2,#2b2926);text-decoration:none;
  transition:background .14s ease,color .14s ease;
}
.page-item .pi-dot{
  width:6px;height:6px;border-radius:50%;background:var(--rule,#ddd7c8);flex:none;
  transition:background .14s ease;
}
.page-item:hover{background:#f7f4ec;}
.page-item:hover .pi-dot{background:var(--ink,#161514);}
.page-item.active{color:var(--accent,#f0521c);font-weight:600;}
.page-item.active .pi-dot{background:var(--accent,#f0521c);}