.soundboard-player { position:relative; width:100%; height:100%; overflow:hidden; isolation:isolate; }
#centralSoundboard.soundboard-player { position:absolute; inset:0; }
.soundboard-media-frame { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.soundboard-media-frame[data-position="top-left"] { align-items:flex-start; justify-content:flex-start; }
.soundboard-media-frame[data-position="top-right"] { align-items:flex-start; justify-content:flex-end; }
.soundboard-media-frame[data-position="bottom-left"] { align-items:flex-end; justify-content:flex-start; }
.soundboard-media-frame[data-position="bottom-right"] { align-items:flex-end; justify-content:flex-end; }
.soundboard-media { display:block; width:var(--soundboard-size); height:var(--soundboard-size); object-fit:contain; }
.soundboard-media-frame[data-position="top-left"] .soundboard-media { object-position:top left; }
.soundboard-media-frame[data-position="top-right"] .soundboard-media { object-position:top right; }
.soundboard-media-frame[data-position="bottom-left"] .soundboard-media { object-position:bottom left; }
.soundboard-media-frame[data-position="bottom-right"] .soundboard-media { object-position:bottom right; }
.soundboard-audio-frame { visibility:hidden; }
.soundboard-unlock { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; pointer-events:auto; padding:12px 18px; border:1px solid #efbd94; border-radius:8px; color:#251d16; background:#efbd94; font:600 16px/1.4 system-ui,sans-serif; cursor:pointer; }
.soundboard-toolbar { display:flex; gap:16px; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; }
.soundboard-fullscreen-hint { margin:0 0 18px; }
.soundboard-status { min-width:0; display:flex; flex-direction:column; gap:5px; }
.soundboard-status strong { font-size:14px; overflow-wrap:anywhere; }
.soundboard-status .help-text { margin:0; }
.soundboard-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.soundboard-upload-area { min-width:0; padding:20px; margin-bottom:16px; border:1px dashed var(--line); border-radius:10px; background:var(--input); }
.soundboard-upload-area>strong { font-size:14px; }
.soundboard-upload-area>.help-text { margin:10px 0 14px; line-height:1.65; overflow-wrap:anywhere; }
.soundboard-upload-area>.help-text:last-child { margin-bottom:0; font-size:11px; }
.soundboard-upload-area[data-dragging="true"] { border-color:var(--accent); background:#efbd9410; }
.soundboard-upload-area[aria-disabled="true"] .soundboard-upload { opacity:.5; cursor:default; }
.soundboard-upload:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
.soundboard-actions>.button { white-space:normal; }
.soundboard-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(310px,1fr); gap:20px; align-items:start; }
.soundboard-grid>.panel { margin:0; }
.soundboard-grid h2 { font-size:18px; margin:0; }
.soundboard-library-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.soundboard-upload { position:relative; cursor:pointer; }
.soundboard-upload input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.soundboard-upload:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
.soundboard-limits { margin:0 0 18px; }
.soundboard-upload-progress { min-height:1.65em; margin:0 0 12px; }
.soundboard-upload-progress:empty { display:none; }
.soundboard-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,185px),1fr)); align-items:stretch; gap:12px; }
.soundboard-tile { border:1px solid var(--line); background:var(--input); border-radius:10px; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.soundboard-tile[aria-current="true"] { border-color:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent); }
.soundboard-tile-select { appearance:none; border:0; background:transparent; padding:17px; display:grid; gap:9px; text-align:left; color:var(--text); flex:1; cursor:pointer; min-width:0; border-radius:0; }
.soundboard-tile-select strong { font-size:14px; line-height:1.45; overflow-wrap:anywhere; }
.soundboard-tile-select:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.soundboard-tile-select .help-text { font-size:11px; }
.soundboard-type-icon { display:grid; place-items:center; height:54px; width:54px; border-radius:13px; border:1px solid #efbd942b; background:#efbd9410; color:var(--accent); font-size:24px; }
.soundboard-tile[data-kind="video"] .soundboard-type-icon { background:#9cbce214; color:#9cbce2; border-color:#9cbce238; }
.soundboard-tile[data-kind="image"] .soundboard-type-icon { background:#aacaac14; color:#aacaac; border-color:#aacaac38; }
.soundboard-tile-play { margin:0 12px 12px; }
.soundboard-tile-playing { display:block; font-size:10px; color:var(--green); margin-top:2px; }
.soundboard-empty { grid-column:1/-1; border:1px dashed var(--line); border-radius:9px; padding:26px; }
.soundboard-empty strong { display:block; margin-bottom:9px; font-size:14px; }
.soundboard-empty p { margin:0; }
.soundboard-editor>h2 { margin-bottom:18px; }
.soundboard-fields { padding:0; border:0; margin:0; min-width:0; display:grid; gap:18px; }
.soundboard-fields>.field { margin:0; }
.soundboard-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 16px; align-items:start; }
.soundboard-fields input,.soundboard-fields select { width:100%; min-width:0; }
.soundboard-fields label { font-size:12px; }
.soundboard-fields .field>label { min-height:2.8em; display:flex; align-items:end; line-height:1.4; }
.soundboard-fields>.field:first-child>label { min-height:0; }
.soundboard-loop { display:flex; align-items:flex-start; gap:10px; line-height:1.5; }
.soundboard-loop input { width:auto; margin-top:2px; flex:none; }
.soundboard-preview { position:relative; aspect-ratio:16/9; width:100%; min-height:0; border:1px solid var(--line); border-radius:8px; margin:22px 0 12px; overflow:hidden; background:repeating-conic-gradient(#1b1e23 0 25%,#252830 0 50%) 50% / 24px 24px; }
.soundboard-preview-player { position:absolute; inset:0; }
.soundboard-preview-placeholder { position:absolute; inset:0; display:grid; place-content:center; gap:10px; text-align:center; color:var(--quiet); padding:18px; pointer-events:none; }
.soundboard-preview-placeholder>span { font-size:32px; }
.soundboard-preview-placeholder p { margin:0; font-size:12px; overflow-wrap:anywhere; }
.soundboard-preview-feedback { min-height:1.65em; margin:0 0 12px; }
.soundboard-save { padding-top:18px; border-top:1px solid var(--line); }
.soundboard-trash { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); }
.soundboard-trash summary { cursor:pointer; font-size:12px; }
.soundboard-trash-list { display:grid; gap:10px; margin-top:14px; }
.soundboard-trash-row { display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:12px; }
.soundboard-trash-row>span { min-width:0; overflow-wrap:anywhere; }
.soundboard-trash-row>.button { flex:none; }
@media(min-width:1800px) { .soundboard-grid { grid-template-columns:minmax(0,2fr) minmax(390px,1fr); } }
@media(max-width:1120px) { .soundboard-grid { grid-template-columns:minmax(0,1fr); } }
@media(max-width:480px) { .soundboard-field-grid { grid-template-columns:minmax(0,1fr); } .soundboard-fields .field>label { min-height:0; } .soundboard-toolbar>.soundboard-actions { width:100%; } .soundboard-trash-row { align-items:flex-start; flex-direction:column; } }

/* Native fullscreen is a control surface; one whole pad triggers its saved clip. */
#soundboardAdmin:fullscreen { box-sizing:border-box; width:100%; height:100%; padding:0 clamp(18px,2.5vw,44px) clamp(18px,2.5vw,44px); overflow:auto; background:var(--bg); color:var(--text); animation:none; }
#soundboardAdmin:fullscreen::backdrop { background:var(--bg); }
#soundboardAdmin:fullscreen>.overlay-tabs,
#soundboardAdmin:fullscreen .soundboard-editor,
#soundboardAdmin:fullscreen .soundboard-upload,
#soundboardAdmin:fullscreen .soundboard-upload-area,
#soundboardAdmin:fullscreen .soundboard-limits,
#soundboardAdmin:fullscreen .soundboard-upload-progress,
#soundboardAdmin:fullscreen .soundboard-trash,
#soundboardAdmin:fullscreen .soundboard-tile-play,
#soundboardAdmin:fullscreen .soundboard-actions>a { display:none!important; }
#soundboardAdmin:fullscreen .soundboard-toolbar { position:sticky; top:0; z-index:5; padding:clamp(18px,2.5vw,44px) 0 18px; background:var(--bg); border-bottom:1px solid var(--line); }
#soundboardAdmin:fullscreen .soundboard-status strong { font-size:20px; }
#soundboardAdmin:fullscreen .soundboard-toolbar .button { min-height:48px; font-size:14px; padding:12px 20px; }
#soundboardAdmin:fullscreen .soundboard-grid { display:block; }
#soundboardAdmin:fullscreen .soundboard-grid>.panel { padding:0; border:0; background:transparent; }
#soundboardAdmin:fullscreen .soundboard-library-heading { margin-bottom:20px; }
#soundboardAdmin:fullscreen .soundboard-library-heading h2 { font-size:20px; }
#soundboardAdmin:fullscreen .soundboard-tiles { grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); gap:18px; }
#soundboardAdmin:fullscreen .soundboard-tile { border-radius:16px; }
#soundboardAdmin:fullscreen .soundboard-tile[aria-current="true"] { border-color:var(--line); box-shadow:none; }
#soundboardAdmin:fullscreen .soundboard-tile[data-playing="true"] { border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green); }
#soundboardAdmin:fullscreen .soundboard-tile-select { min-height:215px; padding:24px; justify-items:center; align-content:center; gap:14px; text-align:center; }
#soundboardAdmin:fullscreen .soundboard-tile-select:hover:enabled { background:#ffffff08; }
#soundboardAdmin:fullscreen .soundboard-tile-select:active:enabled { background:#efbd9415; }
#soundboardAdmin:fullscreen .soundboard-tile-select strong { font-size:19px; }
#soundboardAdmin:fullscreen .soundboard-tile-select .help-text { font-size:12px; }
#soundboardAdmin:fullscreen .soundboard-type-icon { height:64px; width:64px; font-size:32px; }
#soundboardAdmin:fullscreen .soundboard-tile-playing { font-size:12px; }
.soundboard-tile-tools{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:16px 0}.soundboard-mode-controls{display:flex;gap:6px}.soundboard-mode-controls [aria-pressed=true]{border-color:var(--accent,#edb78b);color:var(--accent,#edb78b)}.soundboard-tile-tools input,.soundboard-tile-tools select{min-width:150px;max-width:100%;flex:1}.soundboard-favorite{justify-self:start}.soundboard-editor[hidden]{display:none}#soundboardAdmin:fullscreen .soundboard-tile-tools{display:flex}#soundboardAdmin:fullscreen .soundboard-favorite{display:none}

/* Keep the selected tile's preview ahead of the configuration form in the
   source order, so the result is the first thing shown and keyboard traversal
   follows the same order. */
body.admin-panel #soundboardAdmin .soundboard-editor { min-width:0; }
body.admin-panel #soundboardAdmin .soundboard-editor > .soundboard-preview {
  min-width:0;
  margin-top:4px;
  border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
}
body.admin-panel #soundboardAdmin .soundboard-editor > .soundboard-preview-feedback { min-width:0; overflow-wrap:anywhere; }
body.admin-panel #soundboardAdmin .soundboard-editor > .soundboard-actions { min-width:0; }
body.admin-panel #soundboardAdmin .soundboard-editor > .soundboard-actions .button { flex:0 1 auto; }
body.admin-panel #soundboardAdmin .soundboard-fields { min-width:0; }
body.admin-panel #soundboardAdmin .soundboard-fields .field { min-width:0; }
body.admin-panel #soundboardAdmin .soundboard-fields input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
body.admin-panel #soundboardAdmin .soundboard-fields select { box-sizing:border-box; width:100%; min-width:0; }
body.admin-panel #soundboardAdmin .soundboard-fields input[type=checkbox],
body.admin-panel #soundboardAdmin .soundboard-fields input[type=radio] { width:18px; height:18px; min-width:18px; flex:none; }
body.admin-panel #soundboardAdmin .soundboard-loop { align-items:center; justify-content:flex-start; }
body.admin-panel #soundboardAdmin .soundboard-loop input { margin:0; }
body.admin-panel #soundboardAdmin .soundboard-tile-tools input,
body.admin-panel #soundboardAdmin .soundboard-tile-tools select { min-width:min(100%,150px); }
@media(max-width:600px) {
  body.admin-panel #soundboardAdmin .soundboard-tiles { grid-template-columns:repeat(auto-fill,minmax(min(100%,144px),1fr)); gap:7px; }
  body.admin-panel #soundboardAdmin .soundboard-tile-play {
    box-sizing:border-box;
    width:calc(100% - 16px);
    min-width:0;
    min-height:32px;
    margin:0 8px 8px;
    padding:6px 8px;
    font-size:11px;
    line-height:1.3;
    white-space:normal;
  }
}