/* scope: .lpl の中だけに効かせる */
.lpl .puzzle-feature-grid{
  display:grid;
  gap:14px;
}
.lpl .puzzle-feature-grid.lpl-cols-1{ grid-template-columns: 1fr; }
.lpl .puzzle-feature-grid.lpl-cols-2{ grid-template-columns: 1fr 1fr; }
.lpl .puzzle-feature-grid.lpl-cols-3{ grid-template-columns: 1fr 1fr 1fr; }

.lpl .puzzle-feature{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:16px;
  align-items:start;
}

.lpl .puzzle-feature__media canvas{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.12);
}

.lpl .code-box{
  margin-top:10px;
  border:1px solid rgba(0,0,0,.1);
  border-radius:12px;
  overflow:hidden;
}

.lpl .code-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  background:rgba(0,0,0,.04);
}

.lpl .code-label{ font-weight:700; opacity:.75; }
.lpl .btn-copy{ padding:6px 10px; border-radius:10px; border:1px solid rgba(0,0,0,.15); background:#fff; cursor:pointer; }

.lpl .code{
  margin:0;
  padding:10px;
  font-size:12px;
  white-space:pre-wrap;
  word-break:break-all;
}

.lpl .lpl-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:6px 0 0;
  font-size:12px;
  opacity:.85;
}
.lpl .lpl-badge{
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  font-size:11px;
}

.lpl .lpl-comment{ margin:8px 0 0; }

.lpl .lpl-muted{ opacity:.7; }

.lpl .lpl-submit .lpl-field{ margin: 12px 0; }
.lpl .lpl-submit label{ display:block; font-weight:700; margin-bottom:6px; }
.lpl .lpl-submit input[type="text"],
.lpl .lpl-submit textarea,
.lpl .lpl-submit select{
  width:100%;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.15);
}
.lpl .lpl-inline{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.lpl .lpl-btn{
  padding:12px 14px;
  border-radius:14px;
  border:0;
  cursor:pointer;
}
.lpl .lpl-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* helper messages (verify / submit feedback) */
.lpl .lpl-help{
  margin-top:6px;
  font-size:13px;
  line-height:1.5;
}
.lpl .lpl-submit-msg{
  margin-top:10px;
}

.lpl .lpl-pagination ul{
  list-style:none;
  display:flex;
  gap:8px;
  padding:0;
}

/* single page slightly bigger media */
.lpl.lpl-single .puzzle-feature{
  grid-template-columns: 260px 1fr;
}

/* 2列→スマホで1列 */
@media (max-width: 767px){
  .lpl .puzzle-feature-grid{ grid-template-columns: 1fr; }
  .lpl .puzzle-feature{ grid-template-columns: 1fr; }
  .lpl .lpl-inline{ grid-template-columns: 1fr; }
  .lpl.lpl-single .puzzle-feature{ grid-template-columns: 1fr; }
}


/* ====== LPL source modifiers ======
   lpl-card--official / lpl-card--community / lpl-card--builtin
   data-lpl-source="official" etc.
*/


/* comment block */
.lpl .lpl-comment{ margin:10px 0 0; padding:10px 12px; border-radius:12px; background:rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.06); }
.lpl .lpl-comment__label{ font-weight:700; font-size:12px; opacity:.7; margin-bottom:6px; }
.lpl .lpl-comment__text{ font-size:13px; line-height:1.55; }

.lpl .lpl-meta--main{ margin-top:6px; display:flex; flex-wrap:wrap; gap:10px; font-size:12px; opacity:.85; }

/* hide comment label when empty, but keep box */
.lpl .lpl-comment[data-has-comment="0"] .lpl-comment__label{
  display:none;
}


/* stars wrapper for difficulty */
.lpl .lpl-stars{ font-family: inherit; }

/* ===== list toolbar (per-page / sort) ===== */
.lpl .lpl-toolbar{
  display:flex;
  justify-content:flex-end;
  margin: 0 0 12px;
}
.lpl .lpl-toolbar__row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.lpl .lpl-toolbar__label{
  display:flex;
  gap:6px;
  align-items:center;
  font-size:12px;
  opacity:.9;
}
.lpl .lpl-toolbar__select{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
}
.lpl .lpl-toolbar__apply{
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
}

/* ===== likes ===== */
.lpl .lpl-like{ margin-top: 10px; }
.lpl .lpl-like-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  cursor:pointer;
}
.lpl .lpl-like-btn[aria-pressed="true"]{
  background: rgba(0,0,0,.06);
}
.lpl .lpl-like-heart{ font-weight:700; }


/* Submit form: code label + paste button */
.lpl .lpl-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.lpl .lpl-paste-btn{
  padding:8px 12px;
  font-size:14px;
  line-height:1;
  white-space:nowrap;
}