:root{
  --nk-gap: 6px;
  --nk-radius: 12px;
  --nk-shadow: 0 10px 30px rgba(0,0,0,.12);
  --nk-border: rgba(0,0,0,.08);
  --nk-light: #f4f7ff;
  --nk-dark:  #d8e0ff;
  --nk-hl: rgba(255, 230, 120, .55);
  --nk-cap: rgba(255, 120, 120, .50);
  --nk-lock: rgba(255, 80, 80, .55);
}

.nk-wrap{
  max-width: 860px;
  margin: 20px auto;
  padding: 14px;
  border: 1px solid var(--nk-border);
  border-radius: 16px;
  box-shadow: var(--nk-shadow);
  background: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

.nk-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.nk-status{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
}

.nk-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.nk-actions button{
  border: 1px solid var(--nk-border);
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
}

.nk-actions button:disabled{
  opacity: .5;
  cursor: not-allowed;
}

.nk-toast{
  min-height: 22px;
  margin: 8px 0 12px;
  color: rgba(0,0,0,.72);
  font-weight: 600;
}

.nk-board{
  display:grid;
  gap: var(--nk-gap);
  user-select:none;
}

.nk-cell{
  position: relative;
  border-radius: var(--nk-radius);
  overflow: hidden;
  border: 1px solid var(--nk-border);
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio: 1 / 1;
}

.nk-cell.light{ background: var(--nk-light); }
.nk-cell.dark{  background: var(--nk-dark); }

.nk-cell.sel{
  outline: 3px solid rgba(70, 120, 255, .55);
  outline-offset: 2px;
}

.nk-cell.move{
  box-shadow: inset 0 0 0 4px var(--nk-hl);
}

.nk-cell.cap{
  box-shadow: inset 0 0 0 4px var(--nk-cap);
}

/* ??????????????????? */
.nk-cell.locked{
  box-shadow: inset 0 0 0 4px var(--nk-lock);
}

.nk-piece{
  width: 92%;
  height: 92%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 28px;
}

.nk-img{
  width: 92%;
  height: 92%;
}

.nk-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
  image-rendering: auto;
}

.nk-img.fixed{
  position:absolute;
  inset: 6%;
  pointer-events:none;
  z-index: 1;
}

.nk-piece.w, .nk-piece.b, .nk-img.w{
  position: relative;
  z-index: 3;
}

.nk-copy{
  opacity: .55;
  filter: grayscale(.1) saturate(.85);
}

.nk-field-fw img,
.nk-field-l3 img{
  opacity: .65;
  mix-blend-mode: multiply;
  filter: contrast(1.05) saturate(.95);
}

.nk-cell.dark .nk-field-fw img,
.nk-cell.dark .nk-field-l3 img{
  opacity: .58;
}

.nk-field-fw,
.nk-field-l3{
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.10));
}

.nk-grave{
  margin-top: 14px;
  border: 1px dashed var(--nk-border);
  border-radius: 14px;
  padding: 10px;
  background: #fafbff;
}

.nk-grave-title{
  font-weight: 800;
  margin-bottom: 8px;
}

.nk-grave-body{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.nk-grave-item{
  border: 1px solid var(--nk-border);
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 700;
}

.nk-grave-item:disabled{
  opacity: .45;
  cursor: not-allowed;
}

.nk-grave-empty{
  opacity: .7;
  font-weight: 700;
}

@media (max-width: 520px){
  .nk-wrap{ padding: 10px; }
  :root{ --nk-gap: 5px; }
  .nk-piece{ font-size: 22px; }
}