/* ===========================
   FONT DECLARATIONS
   =========================== */
@font-face { font-family: 'MyFont'; src: url('perfect-future.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'TitlingGothic'; src: url('titling-gothic.ttf') format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Orbitron'; src: url('orbitron.ttf') format('truetype'); font-weight: 400 700; font-style: normal; }
@font-face { font-family: 'SourceSans'; src: url('source-sans.ttf') format('truetype'); font-weight: 300 700; font-style: normal; }

/* ===========================
   FONT ROLE VARIABLES
   =========================== */
:root{
  --font-base:      'MyFont', Arial, sans-serif;
  --font-heading:   'MyFont', Arial, sans-serif;
  --font-ui:        'MyFont', Arial, sans-serif;
  --font-main-btn:  'MyFont', Arial, sans-serif;

  --main-gap-vh: 10vh;      /* vertical breathing space for main page layout */
  --stack-gap: 2px;         /* gap between stacked buttons */
}

/* Optional font packs */
.font-pack-tech{ --font-base:'SourceSans',Arial,sans-serif; --font-heading:'Orbitron',system-ui,sans-serif; --font-ui:'Orbitron',system-ui,sans-serif; --font-main-btn:'TitlingGothic','MyFont',sans-serif; }
.font-pack-classic{ --font-base:'SourceSans',Arial,sans-serif; --font-heading:'TitlingGothic',Georgia,serif; --font-ui:'MyFont',Arial,sans-serif; --font-main-btn:'MyFont',Arial,sans-serif; }

/* Fine-grained overrides */
.font-base-mine{ --font-base:'MyFont',Arial,sans-serif; }
.font-base-source{ --font-base:'SourceSans',Arial,sans-serif; }
.font-heading-orbitron{ --font-heading:'Orbitron',system-ui,sans-serif; }
.font-heading-titling{ --font-heading:'TitlingGothic','MyFont',sans-serif; }
.font-ui-orbitron{ --font-ui:'Orbitron',system-ui,sans-serif; }
.font-mainbtn-titling{ --font-main-btn:'TitlingGothic','MyFont',sans-serif; }

/* ===========================
   GLOBAL TYPOGRAPHY / BASE
   =========================== */
*{ font-family:var(--font-base); color:#fff; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; }
html,body{ height:100%; margin:0; background:#122; color:#fff; }

/* ===========================
   TOP BAR (Back + Save)
   =========================== */
.top-bar{ display:flex; align-items:center; justify-content:center; gap:20px; padding:20px; }
a.back-button{ display:inline-block; width:120px; height:90px; line-height:38px; text-align:center; background:rgba(0,50,100,1); color:#fff; font-size:6em; font-weight:bold; text-decoration:none; border:1px solid #fff; border-radius:0; transition:.2s transform,.3s background; }
a.back-button:hover{ background:rgba(0,150,255,1); transform:scale(1.025); }
a.back-button:active{ transform:scale(0.95); }
.save-button{ display:flex; align-items:center; justify-content:center; height:90px; padding:0 38px; border:1px solid #fff; background:mediumseagreen; color:#fff; font-size:1.6em; font-weight:bold; box-sizing:border-box; cursor:pointer; }
.save-button:hover{ background:springgreen; }
.save-button.is-disabled{ background:slategray; opacity:.9; cursor:default; pointer-events:none; transform:none; }
.save-button.is-disabled:hover{ background:slategray; transform:none; }

/* ===========================
   TITLE + COUNTER + TOOLS
   =========================== */
.title-counter{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 16px; font-size:1.4em; font-weight:bold; margin:10px 20px; }
.title-counter, .category-header, #global-count{ font-family:var(--font-heading); }
.bulk-tools{ position:static; display:flex; align-items:center; gap:10px; margin-left:8px; font-size:.9em; }
.bulk-toggle input{ transform:scale(1.2); vertical-align:middle; }
@media (max-width:420px){ .title-counter{ gap:8px 12px; } .bulk-tools{ margin-left:0; } }

/* ===========================
   GLOBAL COUNTER STATES
   =========================== */
#global-count{ font-size:1em; font-weight:400; padding:0 10px; border:1px solid rgba(255,255,255,.65); background:rgba(0,0,0,.25); border-radius:0; transition:color .4s,text-shadow .4s,border-color .4s; }
#global-count.low{ color:crimson; text-shadow:0 0 5px rgba(255,0,0,.8); border-color:rgba(255,0,0,.8); }
#global-count.medium{ color:orange; text-shadow:0 0 5px rgba(255,255,0,.8); border-color:rgba(255,255,0,.8); }
#global-count.complete{ color:mediumseagreen; text-shadow:0 0 8px rgba(0,255,0,.9); border-color:rgba(0,255,0,.8); }

/* ===========================
   CATEGORY PANELS (Accordion)
   =========================== */
.category{ border:1px solid #fff; margin:2px auto; width:95%; max-width:700px; background:rgba(0,0,0,.25); }
.category-header{ padding:15px 18px; background:rgba(0,50,100,1); cursor:pointer; display:flex; justify-content:space-between; align-items:center; user-select:none; font-size:1.5em; }
.category-header .header-title{ text-align:left; }
.category-header .header-count{ text-align:right; flex:0 0 auto; margin-left:12px; }
.category-items{ display:none; padding:10px 16px 14px; background:rgba(0,0,0,1) !important; }
.category-items label{ display:block; padding:5px 0; font-size:1.2em; font-family:'Orbitron'; }

/* ===========================
   SAVE TOAST
   =========================== */
#toast{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.9); padding:22px 28px; min-width:280px; max-width:80vw; text-align:center; background:rgba(0,0,0,.85); color:#fff; border:2px solid #fff; border-radius:8px; box-shadow:0 12px 30px rgba(0,0,0,.45); font-size:2em; z-index:1000; opacity:0; visibility:hidden; transition:opacity .25s ease, transform .25s ease, visibility .25s ease; }
#toast.show{ visibility:visible; opacity:1; transform:translate(-50%,-50%) scale(1); }
@media (max-width:400px){ #toast{ font-size:1.6em; padding:18px 22px; } }

/* ===========================
   MAIN PAGE — LOGO
   =========================== */
.gif-container{ position:relative; display:flex; justify-content:center; margin-top:calc(-1 * var(--main-gap-vh)); }
.gif-container img{ max-width:520px; width:80vw; height:auto; display:block; }

/* ===========================
   MAIN PAGE — CLASS BUTTONS
   =========================== */
.button-list{ position:absolute; margin-top:calc(-1 * var(--main-gap-vh)); left:50%; transform:translateX(-50%); width:95%; display:flex; flex-direction:column; gap:var(--stack-gap); align-items:stretch; z-index:1; }
.button-list a{ display:block; text-align:center; padding:20px; background:rgba(0,50,100,1); color:#fff; font-size:2em; text-decoration:none; border-radius:0; border:1px solid #fff; transition:background .3s, transform .2s; font-family:var(--font-main-btn); }
.button-list a:hover{ background:rgba(0,150,255,1); transform:scale(1.025); }

/* Green state when a class is 100% complete */
.button-list a.complete{ background:mediumseagreen !important; border-color:#fff; }
.button-list a.complete:hover{ background:mediumseagreen; transform:scale(1.025); }

/* ===========================
   MAIN PAGE — BACKUP TOOLS
   =========================== */
.backup-tools{ position:absolute; left:50%; transform:translateX(-50%); bottom:calc(var(--main-gap-vh) * 0.6); width:95%; display:flex; gap:var(--stack-gap); justify-content:center; z-index:1000; }
.backup-tools button{ flex:1; padding:12px; min-height:36px; font-size:1rem; border:1px solid #fff; background:rgba(0,50,100,1); color:#fff; font-weight:bold; cursor:pointer; border-radius:0; transition:background .2s, transform .1s; font-family:var(--font-ui); }
.backup-tools button:hover{ background:rgba(0,150,255,1); transform:scale(1.025); }
.backup-tools button:active{ transform:scale(0.95); }

/* ===========================
   RESPONSIVE TWEAKS
   =========================== */
@media (max-width:480px){
  .gif-container img{ width:86vw; }
  .button-list{ width:86vw; }
  .backup-tools{ width:86vw; }
}