/* Custom Soundboard Lite: web version of the Android board. The app itself is always light, so these colours are fixed. */
.sb-stage{margin-block:1.5rem 2rem}
.sb-app{--sb-edit:#FFB300;--sb-font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;position:relative;max-width:68rem;margin-inline:auto;background:#fff;color:#000;border:1px solid var(--border);border-radius:1.25rem;overflow:hidden;font-family:var(--sb-font)}
.sb-app *{box-sizing:border-box}
.sb-top{display:flex;align-items:center;gap:.5rem;padding:.5rem}
.sb-tabs{display:flex;gap:.6rem;flex:1;min-width:0;overflow-x:auto;padding:.1rem;scrollbar-width:none}
.sb-tabs::-webkit-scrollbar{display:none}
.sb-tab,.sb-menu-btn,.sb-view-btn{font:700 1.25rem/1 var(--sb-font);border:0;border-radius:.75rem;cursor:pointer;background:#EEEEEE;color:#000}
.sb-tab{min-width:4.5rem;min-height:3rem;padding:0 1rem;flex:none}
.sb-tab[aria-selected="true"]{background:#C62828;color:#fff}
.sb-menu-btn,.sb-view-btn{width:3rem;height:3rem;flex:none;display:grid;place-items:center;padding:0}
.sb-menu-btn img,.sb-view-btn img{width:1.6rem;height:1.6rem}
.sb-view-btn:focus-visible,.sb-menu-btn:focus-visible{outline:3px solid #1565C0;outline-offset:2px}
.sb-close{display:none}
.sb-editbar{display:none;align-items:center;gap:.75rem;padding:.4rem .75rem;background:var(--sb-edit)}
.sb-app.is-editing .sb-editbar{display:flex}
.sb-app.is-editing .sb-menu-btn,.sb-app.is-editing .sb-view-btn{display:none}
.sb-editbar p{flex:1;margin:0;font:700 1rem/1.3 var(--sb-font);max-width:none;color:#000}
.sb-btn{font:700 1.1rem/1.2 var(--sb-font);min-height:3.5rem;padding:.5rem 1.1rem;border:0;border-radius:.75rem;cursor:pointer;background:#EEEEEE;color:#000}
.sb-editbar .sb-btn{min-height:2.75rem}
.sb-btn.green{background:#2E7D32;color:#fff}
.sb-btn.blue{background:#1565C0;color:#fff}
.sb-btn.red{background:#C62828;color:#fff}
.sb-btn.amber{background:var(--sb-edit);color:#000}
.sb-btn:disabled{opacity:.4;cursor:default}
.sb-frame{border:0 solid transparent;transition:border-width .15s}
.sb-app.is-editing .sb-frame{border:8px solid var(--sb-edit)}
.sb-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;padding:1rem}
.sb-tile{position:relative;aspect-ratio:1/1;min-width:0;min-height:0;border-radius:1.75rem;display:grid;place-items:center;padding:.3rem;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .09s;outline-offset:3px}
.sb-tile:focus-visible{outline:3px solid #1565C0}
.sb-tile.pressed{transform:scale(.92)}
.sb-tile.is-empty:not(.editable){cursor:default}
.sb-tile.drop-target{outline:4px dashed #1565C0}
.sb-tile .pic{position:absolute;inset:.3rem;width:calc(100% - .6rem);height:calc(100% - .6rem);object-fit:contain;padding:.4rem;pointer-events:none}
.sb-tile .emoji,.sb-tile .speaker{font-size:clamp(2.5rem,7vw,4.5rem);line-height:1;pointer-events:none}
.sb-tile .plus{font-size:clamp(3rem,8vw,6rem);font-weight:700;line-height:1;color:#37474F;pointer-events:none}
.sb-tile .pencil{position:absolute;top:.25rem;right:.25rem;width:2.5rem;height:2.5rem;padding:.25rem;background:#FFFFFFCC;pointer-events:none}
.sb-tile .play{position:absolute;top:3.25rem;right:.25rem;width:2.5rem;height:2.5rem;border-radius:50%;border:0;padding:0;background:#FFFFFFCC;color:#2E7D32;font-size:1.1rem;cursor:pointer}
.sb-overlay{border:0;padding:1.5rem;background:transparent;max-width:none;max-height:none;width:100%;height:100%;color:#000}
.sb-overlay::backdrop{background:#000000B3}
.sb-card{background:#fff;border-radius:1.25rem;padding:1.25rem;max-width:26rem;margin:auto;display:grid;gap:.9rem;max-height:100%;overflow:auto}
.sb-overlay{display:none}
.sb-overlay[open]{display:grid;align-items:center}
.sb-card h2,.sb-card h3{margin:0;font:700 1.35rem/1.25 var(--sb-font);text-align:center;color:#000}
.sb-card p{margin:0;max-width:none;color:#000;font-size:1.05rem;white-space:pre-line}
.sb-card .sb-btn{width:100%}
.sb-card input[type=text],.sb-card input[type=password],.sb-card input[type=search],.sb-card select,.sb-card textarea{width:100%;font:inherit;font-size:1.3rem;padding:.7rem .8rem;border:2px solid #9E9E9E;border-radius:.75rem;background:#F5F5F5;color:#000}
.sb-card input[type=password]{text-align:center;font-size:1.5rem;letter-spacing:.2em}
.sb-card label{font-size:1.1rem;color:#37474F}
.sb-card .err{color:#C62828;text-align:center;min-height:1.4em}
.sb-card .row{display:flex;gap:.6rem}
.sb-card .row .sb-btn{flex:1}
.sb-picker{background:#fff;border-radius:1.25rem;width:min(100%,68rem);height:100%;margin:auto;display:grid;grid-template-rows:auto 1fr;overflow:hidden}
.sb-picker header{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;padding:.6rem}
.sb-picker header input{flex:1;min-width:10rem;font:inherit;font-size:1.2rem;padding:.7rem .8rem;border:2px solid #9E9E9E;border-radius:.75rem;background:#F5F5F5;color:#000}
.sb-picker .sb-btn{min-height:3.25rem;font-size:1.05rem}
.sb-symbols{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr));gap:.4rem;padding:.6rem;align-content:start}
.sb-sym{display:grid;gap:.15rem;justify-items:center;padding:.3rem;border:0;background:none;border-radius:.6rem;cursor:pointer;color:#000;font:inherit}
.sb-sym:hover,.sb-sym:focus-visible{background:#E3F2FD}
.sb-sym img{width:5rem;height:5rem;object-fit:contain}
.sb-sym span{font-size:.85rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-empty{grid-column:1/-1;text-align:center;padding:1.5rem;font-size:1.2rem;color:#000}
.sb-sentinel{grid-column:1/-1;height:1px}
.sb-note{max-width:68rem;margin:.9rem auto 0;color:var(--muted);font-size:.9rem}
.sb-note p{max-width:none;margin:.3rem 0}
@media (max-width:720px){
  .sb-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;padding:.7rem}
  .sb-tile{border-radius:1.25rem}
  .sb-editbar{flex-wrap:wrap}
  .sb-editbar p{flex-basis:100%}
  .sb-editbar .sb-btn{flex:1}
}
/* App mode (projects/custom-soundboard-lite.html#app): only the board, filling the window like an installed app.
   Tiles are sized to fit the window without scrolling: five across in landscape, as in the Android app, two across in portrait. */
.sb-app-mode,.sb-app-mode body{background:#fff;overflow:hidden}
.sb-app-mode body>:not(main),.sb-app-mode main>.wrap>:not(#try-it),.sb-app-mode #try-it>:not(#sb-app){display:none!important}
.sb-app-mode .sb-app{position:fixed;inset:0;z-index:30;max-width:none;border:0;border-radius:0;display:flex;flex-direction:column}
.sb-app-mode .sb-top,.sb-app-mode .sb-editbar{flex:none}
.sb-app-mode .sb-open{display:none}
.sb-app-mode .sb-app:not(.is-editing) .sb-close{display:grid}
.sb-app-mode .sb-frame{flex:1;min-height:0;display:grid;place-items:center;container-type:size}
.sb-app-mode .sb-board{grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;padding:1rem;width:100%;width:min(100cqw,calc((100cqh - 3rem) * 2.5 + 6rem))}
.sb-app-mode .sb-tile{container-type:inline-size;border-radius:1.75rem}
.sb-app-mode .sb-tile .emoji,.sb-app-mode .sb-tile .speaker{font-size:45cqi}
.sb-app-mode .sb-tile .plus{font-size:50cqi}
@media (orientation:portrait){
  .sb-app-mode .sb-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;padding:.7rem;width:min(100cqw,calc((100cqh - 4.2rem) * .4 + 2.1rem))}
  .sb-app-mode .sb-tile{border-radius:1.25rem}
}
@media (prefers-reduced-motion:reduce){.sb-tile,.sb-frame{transition:none}}