*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  background:#353535;
  color:#353535;
  font-family:system-ui,-apple-system,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif;
  font-weight:800;
  -webkit-font-smoothing:antialiased;
}
.wrap{
  width:min(100%,480px);
  margin:0 auto;
  padding:20px 16px 40px;
}
h1{
  margin:8px 0 18px;
  text-align:center;
  color:#eee;
  font-size:1.15rem;
  line-height:1.35;
  font-weight:900;
  word-break:break-word;
}
.row{
  display:grid;
  gap:10px;
  margin-bottom:12px;
}
.row.cols-3{grid-template-columns:repeat(3,1fr)}
.row.cols-4{grid-template-columns:repeat(4,1fr)}
.grid a,.grid .slot{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:64px;
  padding:8px 6px;
  border-radius:10px;
  text-align:center;
  word-break:break-word;
}
.grid a{
  background:#eeeeed;
  color:#353535;
  text-decoration:none;
  font-size:0.85rem;
  line-height:1.25;
  box-shadow:3px 3px 0 rgba(0,0,0,.35);
  gap:2px;
}
.grid a .t{font-weight:900}
.grid a .m{
  font-size:0.68rem;
  font-weight:700;
  color:#666;
  line-height:1.2;
}
.grid .slot.empty{
  background:transparent;
  border:1.5px dashed rgba(238,238,237,.22);
  box-shadow:none;
  min-height:64px;
  pointer-events:none;
}
.grid a:active{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(0,0,0,.35)}
.err{color:#f8d7da;text-align:center;font-weight:600}
@media (max-width:360px){
  .row.cols-4{gap:8px}
  .grid a,.grid .slot{font-size:0.75rem;min-height:56px;padding:8px 4px}
  .grid a .m{font-size:0.62rem}
}