/* 落ちものパズルの画面、スマホ用ボタン、ランキング */
.blk {
  position: relative; max-width: 420px; margin: 0 auto .6em; border-radius: 10px; overflow: hidden;
  background: #101018; outline: none; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.blk:focus-visible { box-shadow: 0 0 0 2px var(--text); }
.blk canvas { display: block; width: 100%; aspect-ratio: 320 / 384; cursor: pointer; }
.blk-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-width: 420px; margin: 0 auto 1.3em; user-select: none; -webkit-user-select: none; }
.blk-pad button {
  height: 50px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--code-bg); color: var(--text); font: 600 15px var(--sans);
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
.blk-pad button:active { background: var(--line); }
@media (hover: hover) and (pointer: fine) { .blk-pad { display: none; } }
.blk-rank { list-style: none; padding: 0; margin: 0 0 1.5em; font-family: var(--mono); font-size: 14px; }
.content .blk-rank li { display: flex; gap: 14px; padding: 4px 8px; margin: 0; border-bottom: 1px solid var(--line); }
.blk-rank .n { width: 2em; text-align: right; color: var(--muted); }
.blk-rank .sc { flex: 1; }
.blk-rank .at { color: var(--muted); }
.blk-rank .me { background: var(--code-bg); font-weight: 700; }
.blk-pad .wide { grid-column: span 2; }