@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil:wght@700;800&family=Barlow+Condensed:wght@500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#151210;
  --panel:#211a13;
  --panel-2:#291f15;
  --line:#3a2c1c;
  --amber:#e8952f;
  --amber-dim:#8a5c1f;
  --rust:#a85430;
  --verdigris:#4f8a6d;
  --text:#e9e2d3;
  --text-dim:#8c8474;
  --mono: 'JetBrains Mono', 'Consolas', monospace;
  --sans: 'Barlow Condensed', system-ui, sans-serif;
  --stencil: 'Big Shoulders Stencil', sans-serif;
}
*{box-sizing:border-box;}
html, body{
  overflow-x: hidden;
  max-width: 100vw;
  height: 100%;
  margin: 0;
}
body{
  background:var(--bg); color:var(--text); font-family:var(--sans); font-size:16px;
  height:100vh; width:100vw; display:flex; flex-direction:column; overflow:hidden;
}

/* ---------- header ---------- */
header{
  flex:none; padding:14px 20px; display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; background:var(--panel); gap:16px;
}
.brand{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.brand a{ text-decoration:none; cursor:pointer; }
header h1{
  font-family:var(--stencil); font-weight:800; font-size:22px; letter-spacing:0.03em;
  margin:0; color:var(--amber); text-transform:uppercase;
  text-shadow:1px 1px 0 rgba(0,0,0,0.4); transition:opacity 0.15s;
}
.brand a:hover h1{ opacity:0.8; }
header .sub{ color:var(--text-dim); font-size:12px; font-family:var(--mono); }

.load-cell{ display:flex; flex-direction:column; align-items:center; gap:4px; justify-self:center; }
.btn-primary{
  background:var(--rust); border:none; color:#1a1008; padding:9px 20px; font-size:14px;
  font-weight:600; letter-spacing:0.04em; text-transform:uppercase; cursor:pointer;
  border-radius:3px; font-family:var(--sans);
}
.btn-primary:hover{ background:var(--amber); }
.load-caption{ font-family:var(--mono); font-size:10px; color:var(--text-dim); text-align:center; }
.mod-link{ font-family:var(--mono); font-size:11px; color:var(--amber); text-decoration:none; margin-left:10px; }
.mod-link:hover{ text-decoration:underline; }
.btn-login{
  background:none; border:1px solid var(--amber-dim); color:var(--amber);
  padding:8px 16px; font-size:13px; text-transform:uppercase; letter-spacing:0.04em;
  cursor:pointer; border-radius:3px; font-family:var(--sans); justify-self:end;
}
.btn-login:hover{ background:var(--amber-dim); color:#151210; }
.hidden-input{ display:none; }

.hazard-line{
  flex:none; height:4px; width:100%;
  background:repeating-linear-gradient(-45deg,var(--amber) 0 10px,#151210 10px 20px);
  opacity:0.85;
}

/* ---------- main viewer ---------- */
main{ flex:1; min-height:0; display:flex; }
#canvasWrap{
  flex:1; min-width:0; position:relative; overflow:hidden;
  background-color:#100d0b;
  background-image:
    linear-gradient(rgba(79,140,201,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,140,201,0.05) 1px, transparent 1px);
  background-size:28px 28px;
}
canvas{ display:block; width:100%; height:100%; cursor:grab; }
canvas:active{ cursor:grabbing; }

#empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:10px; color:var(--text-dim); font-family:var(--mono); font-size:13px;
  text-align:center; padding:20px;
}
#empty b{ color:var(--amber); }

aside{
  width:300px; flex-shrink:0; min-width:0;
  border-left:1px solid var(--line); background:var(--panel);
  overflow-y:auto; overflow-x:hidden; padding:16px; font-family:var(--mono); font-size:12px;
  display:flex; flex-direction:column; gap:16px;
  scrollbar-width:thin; scrollbar-color:var(--amber-dim) var(--panel);
}
aside::-webkit-scrollbar{ width:8px; }
aside::-webkit-scrollbar-track{ background:var(--panel); }
aside::-webkit-scrollbar-thumb{ background:var(--amber-dim); border-radius:4px; }
aside::-webkit-scrollbar-thumb:hover{ background:var(--amber); }

.rivet-panel{
  position:relative; background:var(--panel-2); border-radius:6px;
  padding:14px 16px; border:1px solid var(--line);
}
.rivet-panel::before, .rivet-panel::after, .rivet-panel .r3, .rivet-panel .r4{
  content:''; position:absolute; width:7px; height:7px; border-radius:50%;
  background:#5b4a34; box-shadow:inset 0 1px 1px rgba(0,0,0,0.6);
}
.rivet-panel::before{ top:6px; left:6px; }
.rivet-panel::after{ top:6px; right:6px; }
.rivet-panel .r3{ bottom:6px; left:6px; }
.rivet-panel .r4{ bottom:6px; right:6px; }
.rivet-panel h2{
  font-size:11px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--text-dim); margin:0 0 10px; font-family:var(--sans); font-weight:600;
}
.legend-row{ display:flex; align-items:center; gap:8px; padding:3px 0; cursor:pointer; }
.legend-row:hover{ color:var(--amber); }
.legend-row img{ width:16px; height:16px; flex:none; image-rendering:pixelated; }
.swatch{ width:10px; height:10px; flex:none; border-radius:2px; }
.legend-row span.id{ color:var(--text-dim); font-size:10px; margin-left:auto; }
.stat{ display:flex; justify-content:space-between; padding:2px 0; color:var(--text-dim); }
.stat b{ color:var(--text); font-weight:400; }

#tooltip{
  position:fixed; pointer-events:none; background:#0a0908; border:1px solid var(--amber-dim);
  padding:10px 12px; font-family:var(--mono); font-size:11px; line-height:1.5;
  color:var(--text); display:none; z-index:10; max-width:260px; border-radius:2px;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
}
#tooltip b{ color:var(--amber); }

/* ---------- public gallery drawer ---------- */
.gallery-section{ flex:none; border-top:1px solid var(--line); background:var(--panel); }
.gallery-head{
  display:flex; align-items:center; gap:12px; padding:10px 20px; cursor:pointer; user-select:none;
}
.gallery-head h2{
  font-family:var(--stencil); font-weight:800; text-transform:uppercase;
  color:var(--amber); font-size:17px; letter-spacing:0.02em; margin:0;
}
.gallery-head .sub{ color:var(--text-dim); font-size:12px; font-family:var(--mono); }
.chevron{ margin-left:auto; color:var(--amber); font-family:var(--mono); font-size:14px; }

.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fill, 200px); justify-content:start;
  gap:16px; padding:0 20px 16px; max-height:290px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--amber-dim) var(--panel);
}
.gallery-grid::-webkit-scrollbar{ width:8px; }
.gallery-grid::-webkit-scrollbar-track{ background:var(--panel); }
.gallery-grid::-webkit-scrollbar-thumb{ background:var(--amber-dim); border-radius:4px; }
.gallery-grid::-webkit-scrollbar-thumb:hover{ background:var(--amber); }
.gallery-grid.collapsed{ display:none; }

.gcard{
  position:relative; width:200px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:6px; overflow:hidden;
}
.gcard::before, .gcard::after, .gcard .r3, .gcard .r4{
  content:''; position:absolute; width:7px; height:7px; border-radius:50%;
  background:#5b4a34; box-shadow:inset 0 1px 1px rgba(0,0,0,0.6); z-index:2;
}
.gcard::before{ top:6px; left:6px; }
.gcard::after{ top:6px; right:6px; }
.gcard .r3{ bottom:6px; left:6px; }
.gcard .r4{ bottom:6px; right:6px; }

.gthumb{
  aspect-ratio:4/3; background-color:#100d0b;
  background-image:
    linear-gradient(rgba(232,149,47,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,149,47,0.08) 1px, transparent 1px);
  background-size:16px 16px; display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); font-family:var(--mono); font-size:11px;
}
.gbody{ padding:10px 12px 12px; }
.gtitle{ font-family:var(--sans); font-weight:600; font-size:14px; margin:0 0 6px; color:var(--text); }
.gowner{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.avatar{
  width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:600; font-family:var(--sans); flex:none;
}
.avatar.discord{ background:#7289da; color:#12142a; }
.avatar.google{ background:#4f8a6d; color:#0c1a14; }
.gowner span{ font-size:11px; color:var(--text-dim); font-family:var(--mono); }

.diamond-row{ display:flex; align-items:center; gap:8px; border-top:1px solid var(--line); padding-top:8px; }
.diamond-btn{ background:none; border:none; padding:0; cursor:pointer; width:24px; height:24px; display:flex; align-items:center; justify-content:center; }
.diamond-btn img{ width:20px; height:20px; opacity:0.28; transition:opacity 0.15s, transform 0.15s; display:block; }
.diamond-btn.active img{ opacity:1; transform:scale(1.08); }
.diamond-count{ font-family:var(--mono); font-size:12px; color:var(--text-dim); }
.load-mini{
  margin-left:auto; background:none; border:1px solid var(--amber-dim); color:var(--amber);
  font-family:var(--mono); font-size:11px; text-transform:uppercase; padding:4px 10px;
  border-radius:3px; cursor:pointer;
}
.load-mini:hover{ background:var(--amber-dim); color:#151210; }

/* ---------- login modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,8,6,0.8);
  display:flex; align-items:center; justify-content:center; z-index:20;
}
.modal-backdrop.hidden{ display:none; }
.modal-box{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:26px 30px; width:320px; position:relative;
}
.modal-box::before, .modal-box::after{
  content:''; position:absolute; width:7px; height:7px; border-radius:50%;
  background:#5b4a34; top:8px; box-shadow:inset 0 1px 1px rgba(0,0,0,0.6);
}
.modal-box::before{ left:8px; }
.modal-box::after{ right:8px; }
.modal-box h2{
  font-family:var(--stencil); text-transform:uppercase; color:var(--amber);
  font-size:19px; margin:0 0 6px; letter-spacing:0.02em;
}
.modal-box p{ color:var(--text-dim); font-size:12px; font-family:var(--mono); margin:0 0 20px; }
.oauth-btn{
  display:flex; align-items:center; gap:12px; width:100%; background:var(--panel-2);
  border:1px solid var(--line); color:var(--text); padding:11px 14px; border-radius:5px;
  font-family:var(--sans); font-size:15px; font-weight:600; cursor:pointer; margin-bottom:10px;
}
.oauth-btn:hover{ border-color:var(--amber-dim); }
.oauth-badge{
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; flex:none;
}
.oauth-badge.discord{ background:#7289da; color:#12142a; }
.oauth-badge.google{ background:#e9e2d3; color:#151210; }
.modal-close{
  position:absolute; top:8px; right:32px; background:none; border:none;
  color:var(--text-dim); font-family:var(--mono); font-size:15px; cursor:pointer;
}

.modal-box.wide{ width:420px; }
.modal-box ul, .modal-box ol{ margin:0 0 18px; padding-left:20px; font-size:13px; line-height:1.6; color:var(--text); }
.modal-box ul li, .modal-box ol li{ margin-bottom:8px; }
.modal-box ul code, .modal-box ol code{ background:var(--panel-2); padding:1px 5px; border-radius:2px; font-family:var(--mono); font-size:11.5px; }
.got-it-btn{
  width:100%; background:var(--amber); border:none; color:#151210; font-weight:700;
  padding:10px; border-radius:5px; cursor:pointer; font-family:var(--sans); font-size:14px; margin-top:6px;
}
.got-it-btn:hover{ background:#fff; }
.info-modal-footer{
  display:flex; align-items:center; gap:8px; margin-top:14px;
  font-family:var(--mono); font-size:11px; color:var(--text-dim);
}
.info-modal-footer input[type=checkbox]{ accent-color:var(--amber); }
.info-modal-footer label{ cursor:pointer; }