/* PKショットマップ 専用スタイル（既存テーマに干渉しないようスコープ） */
.pkshot-page { --pk-w: 800; --pk-h: 450; /* width controllers (can be overridden inline) */ --pk-wrap-max: 980px; --pk-toolbar-max: 980px; }
.pkshot-page * { box-sizing: border-box; }

.pkshot-wrap { max-width: var(--pk-wrap-max, 980px); margin-inline: auto; display: grid; gap: 4px; }
.pkshot-title { font-size: 20px; margin: 0 0 12px; }

.pkshot-toolbar { display:flex; flex-direction:column; gap: 6px; align-items: stretch; padding: 8px 10px; background:#fff; border:1px solid #eaeaea; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.04); width: 100%; max-width: var(--pk-toolbar-max, 100%); margin-inline: auto; }
.pkshot-toolbar .row { display:flex; flex-wrap:wrap; gap: 6px 8px; align-items: center; }
.pkshot-toolbar .spacer { flex: 1; }
.pkshot-toolbar label { display:inline-flex; gap:.4rem; align-items:center; margin:0; }
.pkshot-toolbar label.pkf { display:grid; grid-template-columns: var(--pk-lbl-w, max-content) minmax(0, var(--pk-ctl-w, auto)); align-items:center; column-gap:6px; white-space:nowrap; }
/* Opt-in automatically via :has() so Blade変更なしでも適用可能 */
.pkshot-toolbar label:has(#clickAddMode),
.pkshot-toolbar label:has(#bgMode),
.pkshot-toolbar label:has(#mime),
.pkshot-toolbar label:has(#scale),
.pkshot-toolbar label:has(#playerText),
.pkshot-toolbar label:has(#matchText),
.pkshot-toolbar label:has(#fname){ display:grid; grid-template-columns: var(--pk-lbl-w, max-content) minmax(0, var(--pk-ctl-w, auto)); align-items:center; column-gap:6px; white-space:nowrap; }
/* Label-side widths (small/large groups) */
.pkshot-toolbar label:has(#clickAddMode),
.pkshot-toolbar label:has(#bgMode),
.pkshot-toolbar label:has(#mime),
.pkshot-toolbar label:has(#scale) { --pk-lbl-w: 72px; }
.pkshot-toolbar label:has(#playerText),
.pkshot-toolbar label:has(#matchText),
.pkshot-toolbar label:has(#fname) { --pk-lbl-w: 88px; }
/* Label width steps */
.pkshot-toolbar label.pkf.lw-1 { --pk-lbl-w: 56px; }
.pkshot-toolbar label.pkf.lw-2 { --pk-lbl-w: 72px; }
.pkshot-toolbar label.pkf.lw-3 { --pk-lbl-w: 88px; }
.pkshot-toolbar label.pkf.lw-4 { --pk-lbl-w: 104px; }
.pkshot-toolbar label.pkf.lw-5 { --pk-lbl-w: 128px; }
.pkshot-toolbar input[type="text"],
.pkshot-toolbar input[type="number"],
.pkshot-toolbar select { border:1px solid #ddd; border-radius:8px; padding:.35rem .5rem; font-size:14px; height:auto; }

/* compact buttons and keep inline */
.pkshot-toolbar .btn { display:inline-flex; align-items:center; justify-content:center; font-size:13px; line-height:1.1; padding:.28rem .5rem; border-radius:8px; white-space:nowrap; width:auto; max-width:none; }
.pkshot-toolbar .row:first-child .btn{ font-size:13px; padding:.26rem .48rem; }
.pkshot-toolbar .btn.ghost { background:#f6f6f6; color:#111; }
.pkshot-toolbar .btn.btn-danger { background:#b00020; color:#fff; }

/* make control row form a compact grid on wider screens */
/* Inputs row as responsive grid controlled by CSS variables */
@media (min-width: 820px){
  .pkshot-toolbar .row.row--inputs {
    display: grid;
    /* Control columns via --pk-cols (2/3/4/auto-fit) and min size via --pk-min */
    grid-template-columns: repeat(var(--pk-cols, auto-fit), minmax(var(--pk-min, 200px), 1fr));
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
  }
  /* manual line break utility inside inputs grid */
  .pkshot-toolbar .row.row--inputs .col-break{ display:block; grid-column: 1 / -1; height:0; }
}
/* hidden by default on small screens */
.pkshot-toolbar .row.row--inputs .col-break{ display:none; }

/* Utilities to set column count */
.pkshot-cols-2 { --pk-cols: 2; }
.pkshot-cols-3 { --pk-cols: 3; }
.pkshot-cols-4 { --pk-cols: 4; }

/* Wider inputs: player/match/fname only */
.pkshot-toolbar #playerText,
.pkshot-toolbar #matchText,
.pkshot-toolbar #fname {
  width: 340px;
  max-width: 100%;
}

/* Mobile: fill available width */
@media (max-width: 640px){
  .pkshot-toolbar #playerText,
  .pkshot-toolbar #matchText,
  .pkshot-toolbar #fname {
    width: 100%;
  }
  .pkshot-toolbar label.pkf { grid-template-columns: 1fr; white-space: normal; }
  .pkshot-toolbar label:has(#clickAddMode),
  .pkshot-toolbar label:has(#bgMode),
  .pkshot-toolbar label:has(#mime),
  .pkshot-toolbar label:has(#scale),
  .pkshot-toolbar label:has(#playerText),
  .pkshot-toolbar label:has(#matchText),
  .pkshot-toolbar label:has(#fname){ grid-template-columns: 1fr; white-space: normal; }
}

/* Small width controls */
.pkshot-toolbar #clickAddMode,
.pkshot-toolbar #bgMode,
.pkshot-toolbar #mime { width: 100px; max-width: 100%; }
.pkshot-toolbar #scale { width: 90px; max-width: 100%; }

/* Width utilities (5 steps). Apply class to input/select to control width. */
.pkshot-toolbar .pkshot-w-1 { width: 100px !important; max-width: 100%; }
.pkshot-toolbar .pkshot-w-2 { width: 140px !important; max-width: 100%; }
.pkshot-toolbar .pkshot-w-3 { width: 220px !important; max-width: 100%; }
.pkshot-toolbar .pkshot-w-4 { width: 300px !important; max-width: 100%; }
.pkshot-toolbar .pkshot-w-5 { width: 360px !important; max-width: 100%; }
.pkshot-toolbar .pkshot-w-6 { width: 468px !important; max-width: 100%; }

@media (max-width: 640px){
  .pkshot-toolbar .pkshot-w-1,
  .pkshot-toolbar .pkshot-w-2,
  .pkshot-toolbar .pkshot-w-3,
  .pkshot-toolbar .pkshot-w-4,
  .pkshot-toolbar .pkshot-w-5
  .pkshot-toolbar .pkshot-w-6 { width: 100% !important; }
}

.pkshot-page .btn { cursor:pointer; border:1px solid #ddd; background:#111; color:#fff; padding:.55rem .9rem; border-radius: 10px; font-weight:700; }
.pkshot-page .btn.ghost { background:#f6f6f6; color:#111; }
.pkshot-page .btn.btn-danger { background:#b00020; color:#fff; }

.pkshot-stage canvas { width: calc(var(--pk-w) * 1px); height: calc(var(--pk-h) * 1px); border-radius: 14px; background:#111; border:1px solid #ddd; box-shadow: 0 4px 24px rgba(0,0,0,.08); }
.pkshot-stage .hint { color:#666; display:block; margin-top:6px; }

.pkshot-inspector { background:#fff; border:1px solid #eaeaea; border-radius:12px; padding:10px 12px; box-shadow:0 2px 12px rgba(0,0,0,.04); display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.pkshot-inspector .group { display:flex; gap:8px 10px; align-items:center; flex-wrap:wrap; }
.pkshot-inspector input[type="color"]{ width: 36px; height: 28px; padding:0; border:1px solid #ddd; border-radius:8px; }
.pkshot-inspector input[type="range"]{ width: 160px; }

/* Help modal */
.pkshot-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 1000; }
.pkshot-modal-backdrop.open { display: flex; }
.pkshot-modal { background:#fff; width: min(760px, calc(100vw - 40px)); max-height: 80vh; overflow: auto; border-radius: 14px; box-shadow: 0 10px 36px rgba(0,0,0,.3); }
.pkshot-modal header { display:flex; align-items:center; justify-content: space-between; padding: 14px 16px; border-bottom:1px solid #eee; }
.pkshot-modal header h2 { font-size: 18px; margin:0; }
.pkshot-modal .body { padding: 16px; line-height: 1.7; }
.pkshot-modal .body h3 { font-size: 16px; margin: 16px 0 8px; }
.pkshot-modal .body ul { padding-left: 1.2em; }
.pkshot-modal .body code { background:#f5f5f5; padding: 2px 6px; border-radius: 6px; }
.pkshot-modal .close { cursor:pointer; border:1px solid #ddd; background:#f6f6f6; color:#111; padding:.4rem .7rem; border-radius: 10px; }

/* Small viewport tweaks */
@media (max-width: 520px){
  .pkshot-inspector .group { width: 100%; }
}