/* ---------- custom slide font ---------- */
    @font-face{
      font-family:'Reckless';
      src:url('defaults/Reckless-Regular.ttf') format('truetype');
      font-weight:400;           /* regular */
      font-style:normal;
    }
    
    /* NEW: pretend the same file is also the “bold” cut */
    @font-face{
      font-family:'Reckless';
      src:url('defaults/Reckless-Regular.ttf') format('truetype');
      font-weight:700;           /* bold */
      font-style:normal;
      font-display:swap;
    }

/* ==============================================================
   RESET & BASE LAYOUT
   ============================================================== */
   *{
    box-sizing:border-box;
    margin:0;
    padding:0;
    
  }
  
  html,body{width:100%;height:100%;}
  section   {width:100%;height:100%;}
  .hidden   {display:none !important;}

  /* ==============================================================
     DESIGN TOKENS
     ============================================================== */
  :root{
    --bg-1:#eef1f6;
    --bg-2:#e3e8f0;
    --surface:#ffffff;
    --surface-2:#f7f9fc;
    --surface-3:#eef2f8;
    --border:#e2e8f0;
    --border-strong:#cbd5e1;
    --text:#1e293b;
    --text-muted:#64748b;
    --text-faint:#94a3b8;
    --accent:#0078d4;
    --accent-hover:#0067b8;
    --accent-soft:#e8f1fb;
    --danger:#ef4444;
    --danger-hover:#dc2626;
    --on:#22c55e;
    --radius-lg:20px;
    --radius:12px;
    --radius-sm:9px;
    --shadow-card:0 10px 40px -12px rgba(15,23,42,.25);
    --shadow-soft:0 2px 8px -2px rgba(15,23,42,.10);
    --ring:0 0 0 3px rgba(0,120,212,.18);
    --ease:.2s cubic-bezier(.4,0,.2,1);
  }

  body{
    background:radial-gradient(1200px 600px at 50% -10%, var(--bg-2), var(--bg-1));
    color:var(--text);
  }

  /* ==============================================================
     SETUP PAGE – CARD & FORM
     ============================================================== */
  #setup{
    padding:clamp(1rem,4vw,3rem) 1rem;
    overflow-y:auto;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .setup-card{
    max-width:680px;
    margin:0 auto;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);
    overflow:hidden;
  }

  /* card header */
  .setup-head{
    padding:1.75rem 2rem 1.5rem;
    background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border-bottom:1px solid var(--border);
  }
  .setup-head h1{
    font-size:1.6rem;
    font-weight:700;
    letter-spacing:-.02em;
    line-height:1.1;
  }
  .setup-sub{
    margin-top:.4rem;
    color:var(--text-muted);
    font-size:.95rem;
    line-height:1.4;
  }

  #setupForm{padding:1.25rem 2rem 0;}

  /* generic field wrapper */
  .field-group{
    padding:1.1rem 0;
    border-bottom:1px solid var(--border);
  }
  .field-group:last-of-type{border-bottom:none;}
  .field-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:.7rem;
  }
  .field-group:has(.field-header:only-child) .field-header{margin-bottom:.7rem;}
  .field-label{
    font-weight:600;
    font-size:1rem;
    letter-spacing:-.01em;
  }

  /* dim a section's body when its toggle is off */
  .field-group:has(.switch input:not(:checked)) > :not(.field-header){
    opacity:.45;
    filter:saturate(.6);
    transition:opacity var(--ease);
  }

  /* inputs */
  input[type="text"],
  input[type="time"],
  input[type="number"],
  textarea{
    width:100%;
    padding:.6rem .7rem;
    background:var(--surface-2);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    font-size:.95rem;
    font-family:inherit;
    transition:border-color var(--ease), box-shadow var(--ease), background var(--ease);
  }
  textarea{resize:vertical;min-height:2.6rem;line-height:1.4;}
  input::placeholder,textarea::placeholder{color:var(--text-faint);}
  input[type="text"]:focus,
  input[type="time"]:focus,
  input[type="number"]:focus,
  textarea:focus{
    outline:none;
    border-color:var(--accent);
    background:var(--surface);
    box-shadow:var(--ring);
  }

  /* labelled inputs / two-column grid */
  .field-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.9rem;
  }
  .input-label{
    display:flex;
    flex-direction:column;
    gap:.35rem;
    font-size:.82rem;
    font-weight:600;
    color:var(--text-muted);
  }

  /* number input with unit suffix */
  .input-affix{position:relative;display:block;}
  .input-affix input[type="number"]{padding-right:3rem;}
  .affix-unit{
    position:absolute;
    right:.7rem;top:50%;
    transform:translateY(-50%);
    font-size:.8rem;
    color:var(--text-faint);
    pointer-events:none;
  }

  /* ----------- custom file dropzone ----------- */
  .file-native{
    position:absolute;width:1px;height:1px;
    opacity:0;overflow:hidden;clip:rect(0 0 0 0);
  }
  .dropzone{
    display:flex;
    align-items:center;
    gap:.9rem;
    padding:.85rem 1rem;
    background:var(--surface-2);
    border:1.5px dashed var(--border-strong);
    border-radius:var(--radius);
    cursor:pointer;
    transition:border-color var(--ease), background var(--ease);
  }
  .dropzone:hover{
    border-color:var(--accent);
    background:var(--accent-soft);
  }
  .dropzone:focus-within{
    border-color:var(--accent);
    box-shadow:var(--ring);
  }
  .dropzone-icon{
    font-size:1.5rem;
    line-height:1;
    flex:none;
  }
  .dropzone-text{
    display:flex;
    flex-direction:column;
    gap:.1rem;
    min-width:0;
    flex:1;
  }
  .dropzone-title{
    font-weight:600;
    font-size:.95rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .dropzone-title.has-file{color:var(--accent);}
  .dropzone-hint{
    font-size:.78rem;
    color:var(--text-faint);
  }

  /* ----------- LOGO preview ----------- */
  .logo-preview{
    display:flex;
    align-items:center;
    gap:1rem;
    padding:.85rem 1rem;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius);
  }
  .logo-thumb{
    flex:none;
    width:64px;height:64px;
    display:flex;align-items:center;justify-content:center;
    background:
      linear-gradient(45deg,#e9edf3 25%,transparent 25%) -8px 0/16px 16px,
      linear-gradient(-45deg,#e9edf3 25%,transparent 25%) -8px 0/16px 16px,
      linear-gradient(45deg,transparent 75%,#e9edf3 75%)/16px 16px,
      linear-gradient(-45deg,transparent 75%,#e9edf3 75%)/16px 16px,
      #fff;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    overflow:hidden;
  }
  .logo-thumb img{max-width:100%;max-height:100%;object-fit:contain;}
  .logo-info{display:flex;flex-direction:column;gap:.15rem;flex:1;min-width:0;}
  .logo-name{
    font-weight:600;font-size:.92rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    color:var(--text-muted);
  }
  .logo-name.has-file{color:var(--accent);}
  .logo-actions{display:flex;gap:.5rem;flex:none;}

  /* ----------- generic ghost button ----------- */
  .ghost-btn{
    padding:.45rem .8rem;
    font-size:.83rem;font-weight:600;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface);
    color:var(--text-muted);
    cursor:pointer;
    transition:all var(--ease);
  }
  .ghost-btn:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}
  .ghost-btn.danger:hover{background:#fdeaea;border-color:var(--danger);color:var(--danger);}

  /* ----------- field count chip ----------- */
  .field-count{font-size:.8rem;color:var(--text-faint);font-weight:500;}

  /* ----------- SLIDE gallery ----------- */
  .slide-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(116px,1fr));
    gap:.7rem;
  }
  .slide-tile{
    position:relative;
    aspect-ratio:16/9;
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--border);
    background:var(--surface-2);
    cursor:grab;
    padding:0;
    transition:transform var(--ease), box-shadow var(--ease), opacity var(--ease);
  }
  .slide-tile:active{cursor:grabbing;}
  .slide-tile.dragging{opacity:.4;transform:scale(.96);}
  .slide-thumb{position:absolute;inset:0;}
  .slide-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  /* mimic the player's dark overlay so the thumb shows the real look */
  .slide-thumb::after{
    content:"";position:absolute;inset:0;
    background:#413C41;opacity:.30;pointer-events:none;
  }
  .tile-badge{
    position:absolute;top:.35rem;left:.35rem;
    min-width:1.25rem;height:1.25rem;padding:0 .3rem;
    display:flex;align-items:center;justify-content:center;
    font-size:.72rem;font-weight:700;color:#fff;
    background:rgba(15,23,42,.65);border-radius:99px;
    pointer-events:none;
  }
  .tile-tools{
    position:absolute;inset:auto 0 0 0;
    display:flex;justify-content:center;gap:.3rem;
    padding:.35rem;
    background:linear-gradient(0deg,rgba(15,23,42,.7),transparent);
    opacity:0;transition:opacity var(--ease);
  }
  .slide-tile:hover .tile-tools{opacity:1;}
  .tile-btn{
    width:1.7rem;height:1.7rem;
    display:inline-flex;align-items:center;justify-content:center;
    border:none;border-radius:50%;
    background:rgba(255,255,255,.9);
    color:var(--text);font-size:.7rem;line-height:1;
    cursor:pointer;transition:background var(--ease),color var(--ease);
  }
  .tile-btn:hover{background:#fff;}
  .tile-remove:hover{background:var(--danger);color:#fff;}

  .add-tile{
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:.25rem;
    cursor:pointer;
    border:1.5px dashed var(--border-strong);
    background:var(--surface-2);
    color:var(--text-muted);
    transition:all var(--ease);
  }
  .add-tile:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);}
  .add-plus{font-size:1.5rem;line-height:1;font-weight:300;}
  .add-label{font-size:.78rem;font-weight:600;}

  .gallery-actions{
    display:flex;align-items:center;gap:.8rem;
    flex-wrap:wrap;
    margin-top:.7rem;
  }

  /* ----------- TEMPLATES ----------- */
  .template-bar{
    display:flex;
    align-items:flex-end;
    gap:.6rem;
    margin:0 0 .5rem;
    padding:.85rem 1rem;
    background:linear-gradient(180deg,var(--accent-soft),var(--surface-2));
    border:1px solid var(--border);
    border-radius:var(--radius);
  }
  .template-bar-icon{
    font-size:1.1rem;
    color:var(--accent);
    line-height:2.2;
    flex:none;
  }
  .template-select-label{
    display:flex;
    flex-direction:column;
    gap:.3rem;
    flex:1;
    min-width:0;
    font-size:.8rem;
    font-weight:600;
    color:var(--text-muted);
  }
  .template-select-label select{
    width:100%;
    padding:.5rem .6rem;
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    font-size:.92rem;
    font-family:inherit;
    cursor:pointer;
  }
  .template-select-label select:focus{
    outline:none;border-color:var(--accent);box-shadow:var(--ring);
  }

  .ghost-btn.accent{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
  }
  .ghost-btn.accent:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;}

  /* action bar with two buttons + inline save row */
  .action-buttons{
    display:flex;
    gap:.7rem;
    align-items:center;
  }
  .action-buttons .play-btn{flex:1;}
  #saveTemplateBtn{flex:none;white-space:nowrap;}

  .template-save-row{
    display:flex;
    gap:.5rem;
    margin-bottom:.8rem;
  }
  .template-save-row input{flex:1;}

  /* PLAY button / action bar */
  .setup-actions{
    position:sticky;
    bottom:0;
    margin:1.25rem -2rem 0;
    padding:1.1rem 2rem;
    background:linear-gradient(180deg,rgba(255,255,255,0),var(--surface) 35%);
    border-top:1px solid var(--border);
  }
  .play-btn{
    width:100%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    padding:.85rem 1.4rem;
    border:none;
    background:var(--accent);
    color:#fff;
    font-size:1.05rem;
    font-weight:700;
    letter-spacing:.01em;
    border-radius:var(--radius);
    cursor:pointer;
    box-shadow:0 8px 20px -8px rgba(0,120,212,.6);
    transition:background var(--ease), transform var(--ease), box-shadow var(--ease);
  }
  .play-btn:hover{background:var(--accent-hover);transform:translateY(-1px);}
  .play-btn:active{transform:translateY(0);}
  .play-icon{font-size:.85em;}

  /* --------------------------------------------------------------
     PROGRAMME rows in the form
     -------------------------------------------------------------- */
  #programList{
    display:flex;
    flex-direction:column;
    gap:.55rem;
  }
  .progRow{
    display:flex;
    gap:.55rem;
    align-items:center;
  }
  .progRow input[type="time"]{width:7.5rem;flex:none;}
  .progRow input[type="text"]{flex:1;}
  .removeRow{
    width:2.1rem;height:2.1rem;
    flex:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface-2);
    color:var(--text-faint);
    font-size:.85rem;
    line-height:1;
    cursor:pointer;
    transition:all var(--ease);
  }
  .removeRow:hover{
    background:var(--danger);
    border-color:var(--danger);
    color:#fff;
  }

  /* “+ Add entry” button */
  #addRow{
    margin-top:.7rem;
    padding:.5rem .9rem;
    border:1px dashed var(--border-strong);
    border-radius:var(--radius-sm);
    background:transparent;
    color:var(--accent);
    font-weight:600;
    font-size:.9rem;
    cursor:pointer;
    transition:all var(--ease);
  }
  #addRow:hover{background:var(--accent-soft);border-color:var(--accent);}

  /* --------------------------------------------------------------
     SLIDER (Enable / Disable)
     -------------------------------------------------------------- */
  .switch{
    position:relative;
    display:inline-block;
    width:42px;
    height:24px;
    flex:none;
  }
  .switch input{opacity:0;width:0;height:0;}
  .slider{
    position:absolute;
    inset:0;
    cursor:pointer;
    background:var(--border-strong);
    border-radius:34px;
    transition:background var(--ease);
  }
  .slider:before{
    content:"";
    position:absolute;
    height:18px;
    width:18px;
    left:3px;
    bottom:3px;
    background:#fff;
    border-radius:50%;
    box-shadow:0 1px 3px rgba(0,0,0,.2);
    transition:transform var(--ease);
  }
  input:checked + .slider      {background:var(--on);}
  input:checked + .slider:before{transform:translateX(18px);}
  .slider.round                {border-radius:34px;}
  
  /* ==============================================================
     PLAYER STAGE
     ============================================================== */
     #player{
      position:fixed;
      inset:0;
      overflow:hidden;
      background:#000;
      color:#fff;
      font-family:'Reckless', serif;   /* <<< NEW */
    }
  /* background slideshow */
  .bgSlide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity 1s ease-in-out;
  }
  .bgSlide.active{
    opacity:1;
    animation:kenburns 15s ease-in-out;
  }
  @keyframes kenburns{
    0%   {transform:scale(1.1) translateX(0); opacity:0;}
    5%  {opacity:1;}
    95%  {transform:scale(1)   translateX(40px); opacity:1;}
    100% {opacity:0;}
  }
  
  /* cue positioning */
  .cue{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:600;
    text-align:center;
    opacity:0;
  }

  #title, #rem1, #rem2{
    white-space:pre;             /* keep \n, forbid auto-wrap */
  }

  #title{font-size:clamp(2.5vw,6vw,6vw);}     /* down to 2.5 if needed, never >6 */
h2     {font-size:clamp(2vw,3.5vw,3.5vw);}  /* both reminders                */

      /* ---------- darken every background slide ---------- */
  #bgOverlay{
    position:absolute;
    inset:0;                      /* full-cover */
    background:#413C41;           /* your colour */
    opacity:.30;                  /* 30 % */
    pointer-events:none;          /* clicks pass through (so ⛶ / ⚙️ still work) */
    z-index:1;                    /* above bgContainer (default 0) */
  }

  /* keep all cues ABOVE the overlay */
  .cue, #editBtn, #fsBtn, #copyUrlBtn, #logo{
    z-index:2;
  }

  /* loading spinner shown while background slides preload */
  #loadingOverlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#000;
    z-index:5;                    /* above cues & overlay */
  }
  #loadingOverlay.hidden{ display:none; }
  #loadingOverlay .spinner{
    width:64px;
    height:64px;
    border:6px solid rgba(255,255,255,.25);
    border-top-color:#fff;
    border-radius:50%;
    animation:spin 0.8s linear infinite;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  

  #logo {max-width:30vw; max-height:30vh; object-fit:contain;}
  #title{font-size:6vw;}
  h2    {font-size:3.5vw;}
  
  /* ==============================================================
     Wi-Fi block (2-column grid)
     ============================================================== */
  #wifi{
    display:inline-grid;
    grid-template-columns:max-content 1fr;
    column-gap:.6em; row-gap:.4em;
    justify-content:center;
    font-size:3vw;
  }
  .wifi-heading{
    grid-column:1 / -1;
    text-align:center;
    font-size:1.1em;
    font-weight:700;
  }
  .wifi-label{
    text-align:right;
    font-weight:700;
    white-space:nowrap;
  }
  .wifi-val{
    text-align:left;
    color:#D7DCC8;
    font-weight:700;
    white-space:nowrap;
  }
  
  /* ==============================================================
     PROGRAMME grid in the player
     ============================================================== */
/* ---------- PROGRAMME grid in the player ---------- */
#programBlock{
  display:inline-grid;              /* let real width follow content  */
  grid-template-columns:8ch 1fr;       /* 8-character column for times */
  column-gap:1.2em; row-gap:.4em;
  justify-items:start;                 /* left-align every cell */
  line-height:1.1;
  font-size:clamp(2vw,3.5vw,3.5vw);    /* auto-shrink if block would overflow */
}

.program-heading{
  justify-self: center;
  grid-column:1 / -1;
  text-align:center;
  font-size:5vw;          /* ← fixed size you liked */
  margin-bottom:.25em;
}

.prog-time{
  font-variant-numeric:tabular-nums;   /* equal-width digits */
  white-space:nowrap;
}

.prog-title{
  white-space:nowrap;                  /* never wrap words */
}
  
  /* ==============================================================
     FLOATING “EDIT” BUTTON
     ============================================================== */
  #editBtn{
    position:absolute;
    top:1rem; right:1rem;
    padding:.4rem .6rem;
    font-size:1.2rem; line-height:1;
    border:none;
    border-radius:.35rem;
    background:rgba(255,255,255,.8);
    color:#000;
    opacity:0;                /* hidden until hover */
    cursor:pointer;
    transition:opacity .25s;
  }
  #editBtn:hover{opacity:1;}

  /* --------------------------------------------------------------
   SOFT SHADOW ON EVERY FOREGROUND CUE
   -------------------------------------------------------------- */

  /* text cues (title, Wi-Fi, programme, reminders…) */
  .cue{
    text-shadow: 0 3px 8px rgba(0,0,0,.45);   /* horizontal, vertical, blur, colour */
  }

  /* logo image */
  #logo{
    /* text-shadow doesn’t work on images, so use CSS filters instead */
    filter: drop-shadow(0 3px 8px rgba(0,0,0,.55));
  }
  
  /* ---------- “Clear” buttons (inside dropzones) ---------- */
  .clearBtn{
    flex:none;
    margin:0;
    padding:.4rem .8rem;
    font-size:.8rem;
    font-weight:600;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface);
    color:var(--text-muted);
    cursor:pointer;
    white-space:nowrap;
    transition:all var(--ease);
  }
  .clearBtn:hover{
    background:var(--danger);
    border-color:var(--danger);
    color:#fff;
  }

    /* FULL-SCREEN button (same style family as ⚙️) */
  #fsBtn{
    position:absolute;
    top:1rem;   right:4rem;          /* sits left of the edit button */
    padding:.4rem .6rem;
    font-size:1.2rem; line-height:1;
    border:none; border-radius:.35rem;
    background:rgba(255,255,255,.8);
    color:#000; cursor:pointer; opacity:0;
    transition:opacity .25s;
    opacity: 0;
  }

  
    /* copyURL button (same style family as ⚙️) */
  #copyUrlBtn {
    position:absolute;
    top:1rem;   right:8rem;          /* sits left of the edit button */
    padding:.4rem .6rem;
    font-size:1.2rem; line-height:1;
    border:none; border-radius:.35rem;
    background:rgba(255,255,255,.8);
    color:#000; cursor:pointer; opacity:0;
    transition:opacity .25s;
    opacity: 0;
  }

  #player:hover{opacity:1;}
  #fsBtn:hover{opacity:1;}
  #copyUrlBtn:hover {
    opacity: 1;
  }



  /* cue fade-zoom */
  @keyframes fadeZoom{
    0%   {opacity:0; transform:translate(-50%,-50%) scale(1);}
    7%  {opacity:1; transform:translate(-50%,-50%) scale(1);}
    90%  {opacity:1; transform:translate(-50%,-50%) scale(1.03);}
    100% {opacity:0; transform:translate(-50%,-50%) scale(1.05);}
  }