/* ===== RESET & VARS ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f5f6fa;
  --surface: #ffffff;
  --surface2: #eaecf4;
  --text: #1c1e2e;
  --accent: #c0392b;
  --accent2: #1a2744;
  --muted: #7b82a0;
  --border: #dde1f0;
  --radius: 16px;
  --shadow: 0 4px 24px rgba(0,0,0,.08);
  --shadow-md: 0 8px 40px rgba(0,0,0,.13);
}
[data-theme="dark"] {
  --bg: #0e0f1a;
  --surface: #161827;
  --surface2: #1e2035;
  --text: #dde1f4;
  --muted: #6b7290;
  --border: #252840;
  --shadow: 0 4px 24px rgba(0,0,0,.4);
  --shadow-md: 0 8px 40px rgba(0,0,0,.55);
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background .3s, color .3s;
  overflow: hidden;
}

/* ===== SCREENS ===== */
.screen { display: none; position: fixed; inset: 0; flex-direction: column;
          align-items: center; justify-content: center; padding: 24px; }
.screen.active { display: flex; }

/* ===== NO-PWA TUTORIAL ===== */
#screen-nopwa {
  background: linear-gradient(160deg,#0e0f1a 0%,#161827 100%);
  color: #dde1f4;
}
#screen-nopwa .card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 40px 32px;
  max-width: 420px;
  width: 100%;
  text-align: center;
}
.nopwa-logo {
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  background: rgba(192,57,43,.15);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
#screen-nopwa h1 { font-size: 1.75rem; font-weight: 800; color: #c0392b; margin-bottom: 4px; }
#screen-nopwa .tagline { color: #5a6080; margin-bottom: 28px; font-size: .9rem; }
.os-tabs { display: flex; gap: 6px; justify-content: center; margin-bottom: 20px; }
.os-tab { padding: 6px 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,.1);
           background: transparent; color: #9098b8; cursor: pointer; font-size: .82rem;
           transition: all .2s; }
.os-tab.active { background: rgba(192,57,43,.2); border-color: rgba(192,57,43,.4); color: #c0392b; }
.steps { text-align: left; display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.step { display: flex; gap: 12px; align-items: flex-start; }
.step-num { background: #c0392b; color: #fff; border-radius: 50%; min-width: 26px; height: 26px;
             display: flex; align-items: center; justify-content: center;
             font-size: .78rem; font-weight: 700; margin-top: 2px; }
.step-text strong { display: block; font-size: .9rem; color: #dde1f4; }
.step-text span { font-size: .8rem; color: #5a6080; }
.info-badge { display: inline-flex; align-items: center; gap: 6px;
               background: rgba(192,57,43,.1); border: 1px solid rgba(192,57,43,.25);
               border-radius: 8px; padding: 7px 14px; font-size: .8rem; color: #c0392b; }

/* ===== LOADING SCREEN ===== */
#screen-loading {
  background: linear-gradient(160deg,#0e0f1a,#161827);
  color: #dde1f4;
}
.load-icon {
  width: 72px; height: 72px; margin: 0 auto 18px;
  animation: loadpulse 1.6s ease-in-out infinite;
}
@keyframes loadpulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(1.06)} }
.load-title { font-size: 1.9rem; font-weight: 900; letter-spacing: 3px; color: #dde1f4; }
.load-sub { font-size: .82rem; color: #3a3f60; margin-top: 5px; letter-spacing: 2px; text-transform: uppercase; }
.load-bar-wrap { width: 180px; height: 3px; background: rgba(255,255,255,.07);
                  border-radius: 2px; overflow: hidden; margin-top: 28px; }
.load-bar { height: 100%; width: 0; background: #c0392b; border-radius: 2px; transition: width .08s linear; }
.load-powered { font-size: .72rem; color: #2a2f4a; margin-top: 12px; letter-spacing: 2px; text-transform: uppercase; }

/* ===== STORAGE REQUEST ===== */
#screen-storage {
  background: linear-gradient(160deg,#0e0f1a,#161827);
  color: #dde1f4;
}
.stor-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
              border-radius: var(--radius); padding: 36px 28px; max-width: 360px; width: 100%; text-align: center; }
.stor-icon-wrap { width: 56px; height: 56px; margin: 0 auto 18px;
                   background: rgba(192,57,43,.12); border-radius: 14px;
                   display: flex; align-items: center; justify-content: center; }
.stor-card h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
.stor-card p { color: #5a6080; font-size: .88rem; margin-bottom: 28px; line-height: 1.65; }

/* ===== BUTTONS ===== */
.btn { padding: 12px 28px; border-radius: 10px; border: none; cursor: pointer;
        font-size: .92rem; font-weight: 600; transition: transform .12s, opacity .12s; display: inline-flex; align-items: center; gap: 7px; }
.btn:active { transform: scale(.97); }
.btn-primary { background: #c0392b; color: #fff; }
.btn-primary:hover { opacity: .9; }
.btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,.12);
              color: #7b82a0; margin-top: 10px; }
.btn-ghost:hover { border-color: rgba(255,255,255,.22); color: #aab0cc; }
.btn-row { display: flex; flex-direction: column; align-items: center; }

/* ===== FIRST-START SETUP ===== */
#screen-setup { background: var(--bg); }
.setup-card { background: var(--surface); border-radius: var(--radius);
               padding: 36px 28px; max-width: 400px; width: 100%;
               box-shadow: var(--shadow-md); border: 1px solid var(--border); }
.setup-progress { display: flex; gap: 6px; justify-content: center; margin-bottom: 28px; }
.setup-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background .3s, width .3s; }
.setup-dot.active { background: #c0392b; width: 22px; border-radius: 4px; }
.setup-card h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 5px;
                  display: flex; align-items: center; gap: 9px; }
.setup-card h2 svg { flex-shrink: 0; }
.setup-hint { font-size: .83rem; color: var(--muted); margin-bottom: 20px; }
.input-field { width: 100%; padding: 11px 16px; border-radius: 9px;
                border: 1.5px solid var(--border); background: var(--bg);
                color: var(--text); font-size: .95rem; outline: none; transition: border-color .2s; }
.input-field:focus { border-color: #c0392b; }
.setup-next { margin-top: 20px; width: 100%; justify-content: center; }
.theme-row { display: flex; align-items: center; justify-content: space-between;
              margin-top: 20px; padding: 12px 16px; background: var(--surface2);
              border-radius: 10px; border: 1px solid var(--border); }
.theme-row-label { font-size: .88rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }

/* ===== THEME SWITCH (Galahhad / uiverse.io) ===== */
.theme-switch {
  --toggle-size: 26px;
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  --container-light-bg: #3D7EAE;
  --container-night-bg: #1D1F2C;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ECCA2F;
  --moon-bg: #C4C9D1;
  --spot-color: #959DB1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff;
  --clouds-color: #F3FDFF;
  --back-clouds-color: #AACADF;
  --transition: .5s cubic-bezier(0,-0.02,0.4,1.25);
  --circle-transition: .3s cubic-bezier(0,-0.02,0.35,1.17);
}
.theme-switch,.theme-switch *,.theme-switch *::before,.theme-switch *::after {
  box-sizing:border-box;margin:0;padding:0;font-size:var(--toggle-size);
}
.theme-switch__container {
  width:var(--container-width);height:var(--container-height);background-color:var(--container-light-bg);
  border-radius:var(--container-radius);overflow:hidden;cursor:pointer;
  box-shadow:0em -0.062em 0.062em rgba(0,0,0,.25),0em 0.062em 0.125em rgba(255,255,255,.94);
  transition:var(--transition);position:relative;
}
.theme-switch__container::before {
  content:"";position:absolute;z-index:1;inset:0;
  box-shadow:0em 0.05em 0.187em rgba(0,0,0,.25) inset;border-radius:var(--container-radius);
}
.theme-switch__checkbox { display:none; }
.theme-switch__circle-container {
  width:var(--circle-container-diameter);height:var(--circle-container-diameter);
  background-color:rgba(255,255,255,.1);position:absolute;
  left:var(--circle-container-offset);top:var(--circle-container-offset);
  border-radius:var(--container-radius);
  box-shadow:inset 0 0 0 3.375em rgba(255,255,255,.1),0 0 0 0.625em rgba(255,255,255,.1),0 0 0 1.25em rgba(255,255,255,.1);
  display:flex;transition:var(--circle-transition);pointer-events:none;
}
.theme-switch__sun-moon-container {
  pointer-events:auto;position:relative;z-index:2;width:var(--sun-moon-diameter);height:var(--sun-moon-diameter);
  margin:auto;border-radius:var(--container-radius);background-color:var(--sun-bg);
  box-shadow:0.062em 0.062em 0.062em 0em rgba(254,255,239,.61) inset,0em -0.062em 0.062em 0em #a1872a inset;
  filter:drop-shadow(0.062em 0.125em 0.125em rgba(0,0,0,.25));overflow:hidden;transition:var(--transition);
}
.theme-switch__moon {
  transform:translateX(100%);width:100%;height:100%;background-color:var(--moon-bg);border-radius:inherit;
  box-shadow:0.062em 0.062em 0.062em 0em rgba(254,255,239,.61) inset,0em -0.062em 0.062em 0em #969696 inset;
  transition:var(--transition);position:relative;
}
.theme-switch__spot { position:absolute;top:0.75em;left:0.312em;width:0.75em;height:0.75em;
  border-radius:var(--container-radius);background-color:var(--spot-color);
  box-shadow:0em 0.0312em 0.062em rgba(0,0,0,.25) inset; }
.theme-switch__spot:nth-of-type(2) { width:0.375em;height:0.375em;top:0.937em;left:1.375em; }
.theme-switch__spot:nth-last-of-type(3) { width:0.25em;height:0.25em;top:0.312em;left:0.812em; }
.theme-switch__clouds {
  width:1.25em;height:1.25em;background-color:var(--clouds-color);border-radius:var(--container-radius);
  position:absolute;bottom:-0.625em;left:0.312em;
  box-shadow:0.937em 0.312em var(--clouds-color),-0.312em -0.312em var(--back-clouds-color),
    1.437em 0.375em var(--clouds-color),0.5em -0.125em var(--back-clouds-color),
    2.187em 0 var(--clouds-color),1.25em -0.062em var(--back-clouds-color),
    2.937em 0.312em var(--clouds-color),2em -0.312em var(--back-clouds-color),
    3.625em -0.062em var(--clouds-color),2.625em 0em var(--back-clouds-color),
    4.5em -0.312em var(--clouds-color),3.375em -0.437em var(--back-clouds-color),
    4.625em -1.75em 0 0.437em var(--clouds-color),4em -0.625em var(--back-clouds-color),
    4.125em -2.125em 0 0.437em var(--back-clouds-color);
  transition:.5s cubic-bezier(0,-0.02,0.4,1.25);
}
.theme-switch__stars-container {
  position:absolute;color:var(--stars-color);top:-100%;left:0.312em;width:2.75em;height:auto;
  transition:var(--transition);
}
.theme-switch__checkbox:checked + .theme-switch__container { background-color:var(--container-night-bg); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
  left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
  left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em);
}
.theme-switch__circle-container:hover { left:calc(var(--circle-container-offset) + 0.187em); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon { transform:translate(0); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds { bottom:-4.062em; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
  top:50%;transform:translateY(-50%);
}

/* ===== HOMESCREEN ===== */
#screen-home { flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;overflow:hidden; }
.home-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.home-header-left { display:flex;align-items:center;gap:12px; }
.home-logo { width:34px;height:34px;background:rgba(192,57,43,.1);border-radius:9px;
              display:flex;align-items:center;justify-content:center; }
.home-title { font-size: 1.1rem; font-weight: 800; color: var(--text); letter-spacing: .5px; }
.home-meta { font-size: .75rem; color: var(--muted); margin-top: 1px; }
.settings-btn {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
  color: var(--muted);
}
.settings-btn:hover { background: var(--border); color: var(--text); }

.home-grid {
  flex: 1; overflow-y: auto; padding: 20px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
  gap: 14px; align-content: start;
}
.game-card {
  background: var(--surface); border-radius: 14px; padding: 16px 12px 13px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  cursor: pointer; box-shadow: var(--shadow);
  transition: transform .16s, box-shadow .16s, border-color .16s;
  border: 1px solid var(--border); user-select: none;
}
.game-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #c0392b; }
.game-card:active { transform: scale(.97); }
.game-icon { width: 64px; height: 64px; border-radius: 12px; object-fit: cover;
              background: var(--surface2); display: block; }
.game-icon-fallback { width:64px;height:64px;border-radius:12px;background:var(--surface2);
                       display:flex;align-items:center;justify-content:center;color:var(--muted); }
.game-name { font-size: .83rem; font-weight: 600; text-align: center; color: var(--text); line-height: 1.3; }
.no-games { grid-column:1/-1;text-align:center;color:var(--muted);padding:48px 0;font-size:.9rem;line-height:2; }

/* ===== SETTINGS PANEL ===== */
.overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);
            backdrop-filter:blur(4px);z-index:1000;align-items:flex-end;justify-content:center; }
.overlay.show { display:flex; }
.settings-panel {
  background: var(--surface); border-radius: 20px 20px 0 0;
  width: 100%; max-width: 480px; padding: 28px 24px 36px;
  border-top: 1px solid var(--border);
  animation: slideup .22s ease;
}
@keyframes slideup { from{transform:translateY(40px);opacity:0} to{transform:translateY(0);opacity:1} }
.settings-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:24px; }
.settings-title { font-size:1.05rem;font-weight:700;display:flex;align-items:center;gap:8px; }
.settings-close { width:30px;height:30px;border-radius:8px;border:1px solid var(--border);
                   background:var(--surface2);cursor:pointer;display:flex;align-items:center;justify-content:center;
                   color:var(--muted); }
.settings-row { display:flex;align-items:center;justify-content:space-between;
                 padding:14px 0;border-bottom:1px solid var(--border); }
.settings-row:last-child { border-bottom:none; }
.settings-row-label { font-size:.9rem;display:flex;align-items:center;gap:9px;color:var(--text); }
.settings-row-label small { font-size:.78rem;color:var(--muted);display:block;margin-top:2px; }
.settings-version { text-align:center;margin-top:18px;font-size:.75rem;color:var(--muted); }

/* ===== GAME RUNNER ===== */
#screen-runner { padding:0;background:#000; }
#game-frame { width:100%;height:100%;border:none;display:block; }
.close-btn {
  position:fixed;bottom:22px;left:22px;z-index:999;
  width:42px;height:42px;border-radius:11px;
  background:rgba(192,57,43,.92);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.35);transition:transform .15s;
  backdrop-filter:blur(8px);
}
.close-btn:hover { transform:scale(1.08); }

/* ===== CONFIRM OVERLAY ===== */
#confirm-overlay { align-items:center;justify-content:center; }
.confirm-box {
  background:var(--surface);border-radius:var(--radius);
  padding:28px 24px;max-width:300px;width:90%;text-align:center;
  box-shadow:var(--shadow-md);border:1px solid var(--border);
  animation:fadeup .18s ease;
}
@keyframes fadeup { from{transform:translateY(12px);opacity:0} to{transform:translateY(0);opacity:1} }
.confirm-box h3 { font-size:1.05rem;font-weight:700;margin-bottom:7px;
                   display:flex;align-items:center;justify-content:center;gap:7px; }
.confirm-box p { color:var(--muted);font-size:.85rem;margin-bottom:22px; }
.confirm-row { display:flex;gap:10px;justify-content:center; }
.btn-danger { background:#c0392b;color:#fff;border:none; }
.btn-cancel { background:var(--surface2);color:var(--text);border:1px solid var(--border); }

/* ===== SETTINGS: smaller theme toggle ===== */
.settings-row .theme-switch {
  --toggle-size: 16px;
}

/* ===== GAME CARD: version + info btn ===== */
.game-version {
  font-size: .7rem;
  color: var(--muted);
  background: var(--surface2);
  border-radius: 6px;
  padding: 2px 7px;
  margin-top: -4px;
}
.game-info-btn {
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .15s, background .15s;
  z-index: 2;
}
.game-card { position: relative; }
.game-card:hover .game-info-btn { opacity: 1; }
.game-info-btn:hover { background: var(--border); color: var(--text); }

/* ===== PATCHLOG OVERLAY ===== */
#patchlog-overlay { align-items: flex-end; justify-content: center; }
.patchlog-panel {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  width: 100%; max-width: 480px;
  padding: 24px 20px 36px;
  border-top: 1px solid var(--border);
  animation: slideup .22s ease;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.patchlog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.patchlog-header-title {
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.patchlog-close {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
#patchlog-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.patchlog-entry {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--surface2);
}
.patchlog-ver {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.patchlog-badge {
  background: rgba(192,57,43,.15);
  color: #c0392b;
  border: 1px solid rgba(192,57,43,.25);
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 700;
  padding: 2px 8px;
}
.patchlog-date {
  font-size: .75rem;
  color: var(--muted);
}
.patchlog-etitle {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.patchlog-changes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.patchlog-changes li {
  font-size: .82rem;
  color: var(--muted);
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}
.patchlog-changes li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: #c0392b;
}