:root {
  --bg:          #080809;
  --panel:       #0f0f12;
  --panel2:      #13131a;
  --gold:        #c9a227;
  --gold-dim:    rgba(201,162,39,0.12);
  --bronze:      #8b6914;
  --bronze-dim:  rgba(139,105,20,0.2);
  --text:        #d4c4a8;
  --text-dim:    #6b6050;
  --text-mid:    #9a8c78;
  --border:      #1e1d18;
  --border2:     #28251e;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body {
  font-family: 'EB Garamond', Georgia, serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  height: 100vh;
  overflow: hidden;
  background-image:
    radial-gradient(ellipse 60% 80% at 0% 100%, rgba(139,105,20,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 100% 0%, rgba(122,61,26,0.05) 0%, transparent 70%);
}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--panel)}
::-webkit-scrollbar-thumb{background:var(--bronze);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ─── SIDEBAR ─────────────────────────────── */
aside {
  width: 290px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--border2);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
aside::before {
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--bronze) 50%,transparent 100%);
  opacity:.6;z-index:1;
}
.sidebar-header {
  padding: 28px 22px 20px;
  border-bottom: 1px solid var(--border2);
  background: linear-gradient(180deg, rgba(201,162,39,0.04) 0%, transparent 100%);
  flex-shrink: 0;
}
.logo{display:flex;justify-content:center;margin-bottom:12px}
.logo img{
  width:80%;
  height:auto;
  display:block;
  cursor:pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.logo img:hover {
  opacity: 0.8;
  transform: scale(1.02);
}

.logo-rule {
  height:1px;background:linear-gradient(90deg,var(--gold),rgba(139,105,20,0.3),transparent);
  margin-bottom:18px;opacity:.45;
}
.btn {
  width:100%;padding:10px 16px;border-radius:3px;
  font-family:'Cinzel',serif;font-size:11px;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;
  transition:all .25s;margin-bottom:9px;position:relative;overflow:hidden;
}
.btn::after {
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);
  transition:left .55s;pointer-events:none;
}
.btn:hover::after{left:150%}
.btn-open {
  background:transparent;border:1px solid var(--border2);color:var(--text-mid);
}
.btn-open:hover{border-color:var(--bronze);color:var(--text);background:var(--bronze-dim)}
.btn-random {
  background:linear-gradient(180deg,#7a5510 0%,#4a3208 100%);
  border:1px solid var(--bronze);color:#e8d090;
  box-shadow:0 3px 12px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.08);
  margin-bottom: 0;
}
.btn-random:hover:not(:disabled) {
  background:linear-gradient(180deg,var(--bronze) 0%,#5a3e0c 100%);
  border-color:var(--gold);color:#fff;
  box-shadow:0 5px 18px rgba(201,162,39,0.2);transform:translateY(-1px);
}
.btn-random:disabled{opacity:.35;cursor:not-allowed}
.stats{font-size:11px;color:var(--text-dim);text-align:center;font-style:italic;letter-spacing:.3px;margin-top:10px}
.stats b{color:var(--gold);font-style:normal;font-weight:600}

/* ─── SIDEBAR TABS ──────────────────────────── */
.sidebar-tabs{display:flex;border-bottom:1px solid var(--border2);flex-shrink:0}
.stab {
  flex:1;padding:9px 0;background:none;border:none;
  font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-dim);cursor:pointer;transition:all .18s;
  border-bottom:2px solid transparent;position:relative;top:1px;
}
.stab:hover{color:var(--text-mid)}
.stab.active{color:var(--gold);border-bottom-color:var(--gold)}

/* ─── SEARCH ────────────────────────────────── */
.search-wrap {
  padding:10px 14px;border-bottom:1px solid var(--border2);
  flex-shrink:0;position:relative;
}
.search-wrap input {
  width:100%;background:var(--panel2);border:1px solid var(--border2);border-radius:3px;
  padding:7px 10px 7px 30px;font-family:'EB Garamond',serif;font-size:13px;
  color:var(--text);outline:none;transition:border-color .2s;
}
.search-wrap input:focus{border-color:var(--bronze)}
.search-wrap input::placeholder{color:var(--text-dim);font-style:italic}
.search-icon{position:absolute;left:26px;top:50%;transform:translateY(-50%);color:var(--text-dim);font-size:12px;pointer-events:none}

/* ─── SELECTION HINT ────────────────────────── */
.sel-hint {
  padding: 7px 14px;
  font-size: 10px;
  color: var(--text-dim);
  font-style: italic;
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.sel-hint b { color: var(--text-mid); font-style: normal; }

/* ─── LIST PANELS ───────────────────────────── */
.list-panel{flex:1;overflow-y:auto;padding:8px;display:none;scrollbar-width:thin;scrollbar-color:var(--bronze) transparent}
.list-panel.visible{display:block}
.section-label {
  font-family:'Cinzel',serif;font-size:8px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);padding:10px 6px 3px;opacity:.80;
}
.nav-item {
  display:flex;align-items:center;width:100%;text-align:left;
  padding:7px 10px 7px 12px;background:none;border:none;
  border-left:2px solid transparent;color:var(--text-dim);cursor:pointer;
  font-family:'EB Garamond',serif;font-size:13.5px;transition:all .16s;
  border-radius:0 3px 3px 0;margin-bottom:1px;white-space:nowrap;overflow:hidden;
}
.nav-item:hover{background:rgba(201,162,39,0.05);color:var(--text);border-left-color:var(--bronze);padding-left:16px}
.nav-item.active {
  color:var(--gold);background:linear-gradient(90deg,rgba(201,162,39,0.1),transparent);
  border-left-color:var(--gold);font-weight:500;
}
.nav-item .item-name{flex:1;overflow:hidden;text-overflow:ellipsis}
.nav-item .item-badge{font-size:10px;color:var(--text-dim);margin-left:6px;flex-shrink:0;font-style:italic}
.nav-item.active .item-badge{color:rgba(201,162,39,0.45)}

/* alpha/vanilla prefix icons */
.nav-item[data-type="alpha"] .item-name::before{content:'α ';color:#c05a2a;font-style:normal}
.nav-item[data-type="vanilla"] .item-name::before{content:'⚔ ';color:#4a88c0;font-style:normal;font-size:11px}
.nav-item[data-type="unknown"] .item-name::before{content:'? ';color:var(--text-dim);font-style:normal}

/* ─── MAIN ──────────────────────────────────── */
main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

#grid-scroll {
  flex:1;overflow-y:auto;min-height:0;position:relative;
  scrollbar-width:thin;scrollbar-color:var(--bronze) transparent;
}

/* ─── TOPBAR ────────────────────────────────── */
.topbar {
  display:flex;align-items:center;padding:0 20px;height:52px;
  background:var(--panel);border-bottom:1px solid var(--border2);
  gap:10px;flex-shrink:0;position:relative;overflow:hidden;
}
.topbar::after {
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,0.15),transparent);
}
#view-title {
  font-family:'Cinzel',serif;font-size:12px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--gold);flex-shrink:0;
  text-shadow:0 0 20px rgba(201,162,39,0.15);white-space:nowrap;
}

/* active filter chips row */
#chip-area {
  display:flex;gap:5px;flex-wrap:nowrap;overflow:hidden;flex:1;align-items:center;min-width:0;
}
.chip {
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px 2px 9px;border-radius:2px;white-space:nowrap;
  font-family:'Cinzel',serif;font-size:9px;letter-spacing:.06em;flex-shrink:0;
}
.chip-folder{background:var(--bronze-dim);border:1px solid var(--bronze);color:#c8a060}
.chip-alpha{background:rgba(122,61,26,0.2);border:1px solid rgba(192,90,42,0.4);color:#d4805a}
.chip-vanilla{background:rgba(26,61,92,0.2);border:1px solid rgba(74,136,192,0.4);color:#6aaad4}
.chip-unknown{background:rgba(80,75,65,0.2);border:1px solid rgba(100,95,80,0.4);color:var(--text-mid)}
.chip button{background:none;border:none;cursor:pointer;color:inherit;opacity:.55;font-size:12px;line-height:1;padding:0;transition:opacity .1s}
.chip button:hover{opacity:1}
.chip-overflow{font-size:10px;color:var(--text-dim);font-style:italic;white-space:nowrap;padding:0 4px}

/* ─── CLEAR BUTTON (TOPBAR) ────────────────── */
#btn-clear-sel {
  padding: 4px 8px;
  background: transparent;
  border: 1px solid rgba(74,136,192,0.25);
  border-radius: 3px;
  color: #6aaad4;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
  display: none;
  flex-shrink: 0;
  margin-left: 5px;
}
#btn-clear-sel:hover { border-color: rgba(74,136,192,0.5); color: #90c8e8; background: rgba(26,61,92,0.15); }

.topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
#img-count{font-size:11px;color:var(--text-dim);font-style:italic;white-space:nowrap}
.size-toggle{display:flex;gap:3px}
.size-btn {
  background:none;border:1px solid var(--border2);border-radius:2px;
  padding:5px 7px;cursor:pointer;color:var(--text-dim);transition:all .15s;display:flex;align-items:center;
}
.size-btn:hover{border-color:var(--bronze);color:var(--text)}
.size-btn.active{border-color:var(--gold);color:var(--gold);background:var(--gold-dim)}

/* ─── IMAGE GRID ────────────────────────────── */
#image-grid { min-height:100% }
#image-grid.size-sm .vs-row { /* col size handled in JS */ }

.welcome {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:70vh;text-align:center;gap:12px;padding:16px;
}
.welcome-ornament{font-size:38px;opacity:.1}
.welcome h3{font-family:'Cinzel',serif;font-size:20px;font-weight:700;color:var(--gold);letter-spacing:3px;text-transform:uppercase;text-shadow:0 0 5px rgba(201,162,39,0.2)}
.welcome p{font-size:14.5px;color:var(--text-dim);line-height:1.65;max-width:400px;font-style:italic}
.welcome-rule{width:70px;height:1px;background:linear-gradient(90deg,transparent,var(--bronze),transparent);opacity:.4}

/* error state */
.error-box {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:70vh;text-align:center;gap:12px;padding:16px;
}
.error-box h3{font-family:'Cinzel',serif;font-size:16px;color:#c05a2a;letter-spacing:2px;text-transform:uppercase}
.error-box p{font-size:13px;color:var(--text-dim);line-height:1.65;max-width:500px;font-style:italic}
.error-box code{font-size:11px;color:var(--text-mid);background:var(--panel2);padding:2px 6px;border-radius:2px;font-style:normal}

/* ─── IMAGE CARD ────────────────────────────── */
.img-card {
  background:var(--panel2);border-radius:3px;overflow:hidden;
  cursor:pointer;border:1px solid var(--border2);position:relative;
  transition:transform .24s,box-shadow .24s,border-color .24s;
  box-shadow:0 3px 10px rgba(0,0,0,0.4);
  will-change:transform;
}
.img-card:hover{transform:translateY(-3px) scale(1.015);border-color:var(--bronze);box-shadow:0 14px 32px rgba(0,0,0,0.55),0 0 16px rgba(201,162,39,0.07)}
.img-card-ratio {
  width:100%;padding-bottom:75%;position:relative;height:0;overflow:hidden;
}
.img-card img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;background:var(--panel2);opacity:0;transition:opacity .4s;display:block;}
.img-card img.loaded{opacity:1}
.img-card .shimmer {
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(110deg,#0f0f12 30%,#161519 50%,#0f0f12 70%);
  background-size:200% 100%;animation:shimmer 1.6s infinite;transition:opacity .3s;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.img-card .card-overlay {
  position:absolute;bottom:0;left:0;right:0;padding:18px 8px 7px;
  background:linear-gradient(transparent,rgba(5,4,3,0.9));z-index:2;
  opacity:0;transform:translateY(3px);transition:opacity .2s,transform .2s;
}
.img-card:hover .card-overlay{opacity:1;transform:none}
.card-name{font-family:'EB Garamond',serif;font-size:10.5px;color:rgba(212,196,168,0.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-patch-badge {
  position:absolute;top:6px;right:6px;z-index:3;font-family:'Cinzel',serif;
  font-size:8.5px;letter-spacing:.06em;padding:2px 7px;border-radius:2px;
  pointer-events:none;opacity:0;transform:translateY(-2px);transition:opacity .2s,transform .2s;
}
.img-card:hover .card-patch-badge{opacity:1;transform:none}
.badge-alpha{background:rgba(122,61,26,0.85);border:1px solid rgba(192,90,42,0.5);color:#e8a080}
.badge-vanilla{background:rgba(20,50,80,0.85);border:1px solid rgba(60,110,170,0.5);color:#80b8e0}
.badge-unknown{background:rgba(30,28,22,0.85);border:1px solid rgba(80,75,65,0.4);color:var(--text-dim)}

/* ─── MODAL ─────────────────────────────────── */
#modal{display:none;position:fixed;inset:0;background:rgba(5,4,3,0.97);z-index:1000;backdrop-filter:blur(8px)}
#modal.open{display:block}
#modal-img-wrap{position:absolute;top:56px;left:80px;right:80px;bottom:90px;overflow:hidden;cursor:zoom-in}
#modal-img-wrap.zoomed{cursor:grab}
#modal-img-wrap.dragging{cursor:grabbing}
#modal-img {
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  max-width:100%;max-height:100%;object-fit:contain;border:1px solid var(--bronze);
  border-radius:3px;box-shadow:0 0 60px rgba(0,0,0,0.8),0 0 0 1px rgba(201,162,39,0.05);
  transition:opacity .15s ease;will-change:transform;
  user-select:none;-webkit-user-drag:none;
  touch-action:none;
}
#modal-bottom{position:absolute;bottom:0;left:0;right:0;height:90px}
#modal-roll {
  position:absolute;bottom:52px;left:50%;transform:translateX(-50%);
  font-family:'Cinzel',serif;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  padding:8px 24px;background:linear-gradient(180deg,#7a5510 0%,#4a3208 100%);
  border:1px solid var(--bronze);border-radius:3px;color:#e8d090;cursor:pointer;z-index:1001;
  box-shadow:0 4px 16px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.08);
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s;white-space:nowrap;
  visibility:hidden;
}
#modal-roll:hover{background:linear-gradient(180deg,var(--bronze) 0%,#5a3e0c 100%);border-color:var(--gold);color:#fff;box-shadow:0 6px 20px rgba(201,162,39,0.25)}
#modal-roll.visible{visibility:visible}
#modal-caption {
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;font-family:'EB Garamond',serif;font-size:11.5px;
  background:rgba(8,8,9,0.8);padding:5px 14px;border-radius:2px;
  pointer-events:none;white-space:nowrap;
}
#modal-caption .caption-patch{pointer-events:all;visibility:hidden}
#modal-caption .caption-patch.visible{visibility:visible}
.caption-name{color:rgba(212,196,168,0.35);font-style:italic}
.caption-patch {
  font-family:'Cinzel',serif;font-size:9px;letter-spacing:.08em;padding:2px 8px;border-radius:2px;
  transition:filter .15s,transform .15s;
}
.caption-patch:hover{filter:brightness(1.3);transform:scale(1.06)}
.caption-pos{color:rgba(212,196,168,0.25);font-size:10.5px}
.modal-nav {
  position:fixed;top:50%;transform:translateY(-50%);width:44px;height:44px;
  background:rgba(12,12,15,0.8);border:1px solid var(--border2);border-radius:3px;
  color:var(--text-dim);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .16s;backdrop-filter:blur(4px);z-index:1001;font-family:serif;visibility:hidden;
}
.modal-nav:hover{border-color:var(--gold);color:var(--gold);background:rgba(12,12,15,0.95)}
.modal-nav:disabled{opacity:.18;cursor:not-allowed}
#modal-prev{left:16px}
#modal-next{right:16px}
#modal-close {
  position:fixed;top:16px;right:16px;width:36px;height:36px;
  background:rgba(12,12,15,0.8);border:1px solid var(--border2);border-radius:3px;
  color:var(--text-dim);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .16s;z-index:1001;
}
#modal-close:hover{border-color:var(--bronze);color:var(--text)}

#modal-zoom-reset {
  position: fixed;
  top: 16px;
  left: 16px;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(12,12,15,0.9);
  border: 1px solid var(--bronze);
  border-radius: 3px;
  color: var(--text-mid);
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 1001;
  transition: all .15s;
  backdrop-filter: blur(4px);
}
#modal-zoom-reset:hover { border-color: var(--gold); color: var(--text); }
#modal-zoom-reset.visible { display: flex; }

/* ─── ABOUT OVERLAY ──────────────────────────── */
#about-overlay {
  display:none;position:fixed;inset:0;background:rgba(5,4,3,0.88);z-index:1500;
  backdrop-filter:blur(6px);align-items:center;justify-content:center;
}
#about-overlay.open { display:flex; }
#about-box {
  position:relative;max-width:480px;width:90%;
  background:var(--panel);border:1px solid var(--border2);border-radius:4px;
  padding:40px 36px 32px;
  box-shadow:0 0 0 1px rgba(201,162,39,0.08), 0 30px 80px rgba(0,0,0,0.7);
  animation: aboutIn .22s ease;
}
@keyframes aboutIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
#about-box::before {
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--bronze),transparent);opacity:.5;border-radius:4px 4px 0 0;
}
#about-close {
  position:absolute;top:14px;right:14px;width:30px;height:30px;
  background:none;border:1px solid var(--border2);border-radius:2px;
  color:var(--text-dim);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
#about-close:hover { border-color:var(--bronze);color:var(--text); }
.about-ornament { font-size:26px;opacity:.12;text-align:center;margin-bottom:10px; }
.about-title {
  font-family:'Cinzel',serif;font-size:18px;font-weight:700;letter-spacing:3px;
  text-transform:uppercase;color:var(--gold);text-align:center;
  text-shadow:0 0 30px rgba(201,162,39,0.2);margin-bottom:14px;
}
.about-rule {
  width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--bronze),transparent);
  opacity:.45;margin:0 auto 20px;
}
.about-body {
  font-size:14px;color:var(--text-mid);line-height:1.75;margin-bottom:14px;
  font-family:'EB Garamond',serif;
}
.about-footer { text-align:center;margin-top:8px;display:flex;justify-content:center;gap:24px; }
.about-link {
  font-family:'Cinzel',serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--bronze);text-decoration:none;border-bottom:1px solid rgba(139,105,20,0.3);
  padding-bottom:2px;transition:color .15s,border-color .15s;
}
.about-link:hover { color:var(--gold);border-color:var(--gold); }

/* ─── LOADER ─────────────────────────────────── */
#loader{display:none;position:fixed;inset:0;background:rgba(5,4,3,0.92);z-index:2000;flex-direction:column;align-items:center;justify-content:center;gap:18px;backdrop-filter:blur(6px)}
#loader.active{display:flex}
.loader-ring{width:48px;height:48px;border-radius:50%;border:2px solid var(--border2);border-top:2px solid var(--gold);animation:spin .85s linear infinite;box-shadow:0 0 24px rgba(201,162,39,0.2)}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-text{font-family:'Cinzel',serif;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold)}
.loader-sub{font-size:11.5px;color:var(--text-dim);font-style:italic;margin-top:-8px}

/* ─── BACK BUTTON (mobile only) ─────────────────── */
#btn-back { display: none; }

/* Hide chips below 1100px — covers phones, landscape phones, iPads */
@media (max-width: 1100px) {
  #chip-area { display: none; }
}

/* ─── MOBILE ─────────────────────────────────── */
@media (max-width: 768px) {
  body {
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }

  /* Sidebar takes full screen by default */
  aside {
    width: 100%;
    flex-shrink: 0;
    height: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border2);
    transition: transform .28s ease, opacity .28s ease;
  }

  /* Main hidden by default */
  main {
    position: fixed;
    inset: 0;
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 100;
    background: var(--bg);
  }

  /* When grid is active — slide main in, slide aside out */
  body.mobile-grid aside {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    position: fixed;
  }
  body.mobile-grid main {
    transform: translateX(0);
  }

  /* Back button — only visible on mobile */
  #btn-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--text-dim);
    font-family: 'Cinzel', serif;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0 4px 0 0;
    flex-shrink: 0;
    transition: color .15s;
  }
  #btn-back:hover { color: var(--gold); }
  #btn-back::before { content: '‹'; font-size: 16px; line-height: 1; font-family: serif; }

  /* Topbar adjustments */
  .topbar {
    padding: 0 10px;
    gap: 6px;
  }
  #view-title {
    font-size: 11px;
    letter-spacing: .08em;
  }

  /* Shrink size toggle on mobile */
  .size-toggle { display: none; }

  /* Sidebar header more compact */
  .sidebar-header {
    padding: 16px 16px 14px;
  }
  .logo img { width: 60%; }

  /* Bigger touch targets for nav items */
  .nav-item {
    padding: 10px 10px 10px 14px;
    font-size: 14.5px;
  }

  /* sel-hint — show mobile version */
  .sel-hint { display: block !important; }

  /* Hide modal nav arrows on mobile portrait — swipe instead */
  .modal-nav { display: none; }

  #modal-img-wrap {
    left: 0;
    right: 0;
    top: 50px;
    bottom: 80px;
  }
}

/* Mobile landscape — restore arrows since swiping is awkward */
@media (max-width: 900px) and (orientation: landscape) {
  .modal-nav {
    display: flex;
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  #modal-prev { left: 6px; }
  #modal-next { right: 6px; }
  #modal-img-wrap {
    left: 60px;
    right: 60px;
  }
}