/* base.css — structure & layout only. Each page sets its own theme.css for colors/type. */

*{box-sizing:border-box;margin:0;padding:0;}

html,body{min-height:100%;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  padding:56px 20px 40px;
  transition:background .3s ease, color .3s ease;
}

.wrap{
  width:100%;
  max-width:460px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.blocks{display:flex;gap:4px;margin:18px 0 26px;}
.blocks span{width:8px;height:8px;background:var(--surface-2);border:1px solid var(--line);}
.blocks span.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 6px var(--accent-glow,transparent);}

.avatar{
  width:84px;height:84px;
  border-radius:var(--avatar-radius,18px);
  background:var(--avatar-bg,linear-gradient(145deg,var(--surface-2),var(--surface)));
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-size:28px;font-weight:700;
  color:var(--accent);
}

h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:26px;
  margin-top:16px;
  text-align:center;
  letter-spacing:var(--h1-tracking,-0.01em);
}

.tag{
  color:var(--muted);
  font-family:var(--font-mono,var(--font-body));
  font-size:13px;
  margin-top:6px;
  text-align:center;
}

.card-link{
  display:flex;align-items:center;gap:14px;
  width:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius,14px);
  padding:16px 18px;
  margin-top:12px;
  text-decoration:none;
  color:var(--text);
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.card-link:hover{
  transform:translateY(-2px);
  border-color:var(--accent-dim,var(--accent));
  background:var(--surface-2);
}
.card-link .icon{
  width:38px;height:38px;
  border-radius:9px;
  background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.card-link .body{flex:1;}
.card-link .title{font-weight:600;font-size:15px;}
.card-link .sub{color:var(--muted);font-size:12.5px;margin-top:2px;}
.card-link .arrow{color:var(--muted);font-size:14px;}
.card-link:hover .arrow{color:var(--accent);}

.panel{
  width:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius,14px);
  padding:22px;
  margin-top:14px;
}
.panel h2{
  font-family:var(--font-display);
  font-size:16px;
  margin-bottom:10px;
  color:var(--accent);
}
.panel p{color:var(--muted);font-size:14px;line-height:1.6;}

.kv{
  display:flex;justify-content:space-between;
  padding:9px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono,var(--font-body));
  font-size:13px;
}
.kv:last-child{border-bottom:none;}
.kv .k{color:var(--muted);}
.kv .v{color:var(--text);}

.status-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--accent);margin-right:6px;
  box-shadow:0 0 6px var(--accent-glow,transparent);
}

.cta{
  display:block;text-align:center;margin-top:16px;
  background:var(--accent);
  color:var(--accent-contrast,#06170f);
  font-weight:600;
  font-family:var(--font-body);
  font-size:14.5px;
  padding:13px;
  border-radius:10px;
  text-decoration:none;
  transition:.15s ease;
}
.cta:hover{filter:brightness(1.08);}
.cta.discord{background:#5865F2;color:#fff;}

.gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:100%;
  margin-top:14px;
}
.gallery .shot{
  aspect-ratio:4/3;
  border-radius:10px;
  border:1px dashed var(--line);
  background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  font-family:var(--font-mono,var(--font-body));
  font-size:11px;
  text-align:center;
  padding:6px;
  overflow:hidden;
}
.gallery .shot img{width:100%;height:100%;object-fit:cover;display:block;}

@media (prefers-reduced-motion: reduce){.card-link{transition:none;}}