.gci-pc-container{
  width:100%; max-width:800px;
  margin:0 auto;
  padding:16px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.gci-pc-container .grid-label{ font-size:14px; margin:10px 0 6px; font-style:italic; }
.gci-pc-container .grid-block{ margin-bottom:14px; display:flex; flex-wrap:wrap; gap:10px; }

/* Tiles */
.gci-pc-container .letter{
  display:flex; align-items:center; justify-content:center;
  width:72px; height:72px; padding:8px;
  border:1px solid #cfd6dd; border-radius:12px; background:#fff; cursor:pointer;
  box-shadow:0 1px 1.5px rgba(0,0,0,.05);
  transition:transform .05s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.gci-pc-container .letter:hover{ border-color:#5a95b3; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.gci-pc-container .letter:active{ transform:translateY(1px); }
.gci-pc-container .letter img{ display:block; height:48px; width:auto; image-rendering:-webkit-optimize-contrast; }

/* Output */
.gci-pc-container .result-title{ margin:14px 0 6px; }
.gci-pc-container .output{
  --overlap-x: -19px;      /* wrapper (.piece) margin-left */
  --overlap-top: 0px;      /* img margin-top */
  --overlap-bottom: -24px; /* img margin-bottom */
  display:block; width:100%;
  min-height:180px; max-height:600px; overflow:auto;
  border:1px solid #9aa8b6; border-radius:12px; background:#b2c8df;
  margin:10px 0 14px; padding:12px 12px 56px; /* extra bodemruimte tegen afsnijden */
  line-height:0.1em; font-size:36px; box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}
.gci-pc-container .output.is-empty{ line-height:1.2; color:#1f2937; }

.gci-pc-container .output .piece{
  display:inline-block;
  padding-right:4px; padding-bottom:8px;
  margin-left: var(--overlap-x);
}
.gci-pc-container .output .piece.line-start{ margin-left:0; } /* eerste na begin/BR of auto-wrap */

.gci-pc-container .output .piece img{
  display:inline-block; height:72px; width:auto; vertical-align:baseline; image-rendering:-webkit-optimize-contrast;
  margin-top:   var(--overlap-top);
  margin-bottom:var(--overlap-bottom);
}

/* Controls */
.gci-pc-container .controls{ margin:10px 0; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.gci-pc-container .controls.controls-bar label{ margin-right:12px; display:flex; gap:6px; align-items:center; }
.gci-pc-container .controls-top{ border-bottom:1px dashed #d5dde6; padding-bottom:8px; margin-bottom:8px; }
.gci-pc-container .controls-overlap{ padding-top:2px; }
.gci-pc-container .controls-overlap label{ flex:1 1 30%; min-width:220px; } /* sliders mooi naast elkaar, op eigen rij */

.gci-pc-container .btn{
  display:inline-block; padding:10px 14px; border-radius:10px; border:1px solid transparent; cursor:pointer;
  font-size:14px; line-height:1; user-select:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .05s ease;
}
.gci-pc-container .btn.primary{ background:#5a95b3; color:#fff; border-color:#5a95b3; }
.gci-pc-container .btn.primary:hover{ background:#b2c8df; color:#000; border-color:#b2c8df; }
.gci-pc-container .btn.ghost{ background:#fff; color:#333; border-color:#cfd6dd; }
.gci-pc-container .btn.ghost:hover{ background:#f3f6f9; }
.gci-pc-container .btn.danger{ background:#fff; color:#c62828; border-color:#e1bcbc; }
.gci-pc-container .btn.danger:hover{ background:#ffeaea; border-color:#d48e8e; }
.gci-pc-container .btn:active{ transform:translateY(1px); }
.gci-pc-container select, .gci-pc-container input[type="range"]{
  padding:6px 8px; border-radius:10px; border:1px solid #cfd6dd; background:#fff;
}
.gci-pc-container .label-block{ display:block; width:100%; }
.gci-pc-container .textInput{ display:block; width:100%; padding:12px 14px; border-radius:12px; border:1px solid #cfd6dd; background:#fff; box-sizing:border-box; min-height:120px; resize:vertical; }

@media (max-width:640px){
  .gci-pc-container .letter{ width:64px; height:64px; }
  .gci-pc-container .letter img{ height:44px; }
  .gci-pc-container .output .piece img{ height:64px; }
  .gci-pc-container .controls-overlap label{ min-width:180px; }
}